installation

how to install and configure asciicn

prerequisites

next.js 15 project with tailwind css v4 configured

using shadcn cli

easiest way to install components:

npx shadcn@latest add https://asciicn.fldr.zip/r/input.json

manual installation

copy components manually from component pages

1. install font

download meslo nerd font and add to public/fonts/

the nerd font provides 3000+ glyphs for terminal-native icons. all components use these glyphs instead of external icon libraries.

2. configure tailwind css

add css variables to globals.css:

@theme {
  --font-mono: "MesloLGM Nerd Font", monospace;
  
  /* light mode colors */
  --color-background: hsl(210 40% 98%);
  --color-foreground: hsl(222 47% 11%);
  --color-primary: hsl(221 83% 53%);
  --color-border: hsl(214 32% 88%);
  /* ... more colors */
}

3. copy component code

copy components from registry/ascii/ to your project

using nerd font glyphs

asciicn components use nerd font glyphs for all icons. you can browse available glyphs at the nerd fonts cheat sheet.

examples of glyphs available:

file icons:   󰈙  󰈷  󰈎  󰈎
dev icons:    󰌘  󰌷  󰟒  
ui controls:  󰒃  󰒆  󰒉  󰒌  
status:       󰄬  󰄭  󰄮  
arrows:       󱡀  󱡁  󱡂  󱡃

use unicode values directly in components: <span>\ue5c3</span>

project structure

app/
  globals.css
  layout.tsx
registry/
  ascii/
    input.tsx
    badge.tsx
    button.tsx
    menu.tsx
public/
  fonts/
    MesloLGMNerdFont-Regular.ttf