@hascii/ui

█ █  ▄▀▄  ▄▀▀  ▄▀▀  █  █
█▀█  █▀█  ▀▀▄  █    █  █
▀ ▀  ▀ ▀  ▀▀▘  ▀▀▘  ▀  ▀

OpenTUI 向けのターミナル UI コンポーネント。shadcn registry 互換で配布されます。

GitHub EN JA

セットアップ

shadcn init は TailwindCSS を要求するので、TUI 専用プロジェクトでは失敗します。代わりに @hascii/ui init でひな形を書き出します。@hascii 名前空間が登録されるので、後段の shadcn add がそのまま通ります。

bunx @hascii/ui init

コンポーネントは @/ 絶対パスで import されるので、tsconfig.json の paths にエイリアスを通します。

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

コンポーネントを追加

単体で入れる場合。

npx shadcn@latest add @hascii/button

全部まとめて入れる場合は all aggregator を使います。

npx shadcn@latest add @hascii/all

使う

HasciiThemeProvider で囲んだ中で読みます。OpenTUI の React レンダラ前提です。

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>,
)

ターミナルでプレビュー

引数なしでショーケースが起動。components <name> で個別コンポーネントを中央描画。zod バリデートされたオプションを --variant や --size などで渡せます。--help で全オプションが見られます。

bunx @hascii/ui                                        # インタラクティブ
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                      # 全コンポーネントの一覧