@hascii/ui

Setup

shadcn init requires TailwindCSS, so it fails on TUI-only projects. Use @hascii/ui init instead — it writes a minimal components.json and registers the @hascii namespace, so subsequent shadcn add calls just work.

bunx @hascii/ui init

Components import via @/ absolute paths. Make sure your tsconfig.json resolves the alias.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] }
  }
}

Add components

A single component.

npx shadcn@latest add @hascii/button

All components at once via the all aggregator.

npx shadcn@latest add @hascii/all

Use it

Wrap your tree in HasciiThemeProvider and render components with the OpenTUI React renderer.

import { createCliRenderer } from "@opentui/core"
import { createRoot } from "@opentui/react"
import { HasciiThemeProvider } from "@/registry/lib/hascii/theme-context"
import { HasciiButton } from "@/registry/ui/hascii/button"

const renderer = await createCliRenderer({ exitOnCtrlC: true, useMouse: true })
const root = createRoot(renderer)

root.render(
  <HasciiThemeProvider>
    <HasciiButton onPress={() => console.log("clicked")}>Hello</HasciiButton>
  </HasciiThemeProvider>,
)

Preview in your terminal

With no arguments, the CLI launches an interactive showcase. components <name> renders a single component centered. Subcommands accept zod-validated options like --variant, --size, --label. Append --help for the full list.

bunx @hascii/ui                                        # interactive showcase
bunx @hascii/ui components button --variant outline --size lg --label save
bunx @hascii/ui components badge  --variant destructive --label removed
bunx @hascii/ui components --help                      # list everything