[ ascii-cn ]

Introduction

Next

ASCII-styled shadcn components for your project.

ascii-cn brings the visual language of character-grid interfaces to accessible web controls: JetBrains Mono, black backgrounds, square frames, and a restrained blue/yellow palette.

Get started

Use a React project with Tailwind CSS and shadcn initialized, then install a component:

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/button.json

The source is copied into your project. Edit its classes and behavior directly.

Typography

The website uses the JetBrains Mono font bundled with the ASCII diagram skill, under the SIL Open Font License. Configure JetBrains Mono as your project's Tailwind font-mono for the same appearance. Components fall back to your existing monospace font.

Design language

  • Black canvas and near-white body text.
  • Blue interactive borders and yellow attention states.
  • Square frames with centered labels interrupting the top border.
  • Monospaced spacing, bracketed statuses, and explicit text labels.

The references are character-grid PNGs. These components use semantic HTML and CSS borders so text can wrap, forms remain usable, and layouts adapt to smaller screens.

Customize

Component sources live in apps/docs/src/registry/new-york-v4/ui. Edit examples alongside them, then run bun run build to regenerate the registry and website together.