oca-ui

A CLI that scaffolds a token-driven, bilingual, mobile-first design-system app — Next.js 16 · React 19 · Tailwind 4 (OKLCH) · shadcn conventions. The generated project ships with all 35 UI primitives, the design tokens, the design rules, and a built-in component showcase (Storybook-style) on the index page.

Usage

npx oca-ui init my-app
cd my-app
npm run dev          # http://localhost:3000 — the full component showcase

Options:

--pm <npm|pnpm|yarn|bun>   package manager for install (default: npm)
--no-install               copy files only, skip dependency install
-h, --help                 show help

What you get

my-app/
  app/
    globals.css      OKLCH tokens + Tailwind theme mapping + bilingual + touch rules
    layout.tsx       Latin + Arabic fonts, FOUC-free theme/font-size restore
    page.tsx         renders <Showcase />
  components/
    showcase.tsx     live gallery of all 35 components
    theme-toggle.tsx
    ui/              35 primitives — button, input, card, dialog, select, combobox,
                     dropdown-menu, popover, hover-card, tooltip, tabs, table, avatar,
                     alert, badge, checkbox, switch, slider, calendar, chart, field,
                     input-group, page-header, form-section, form-field,
                     sticky-form-actions, scrollable-horizontal, … 
  lib/utils.ts       cn()
  DESIGN_SYSTEM.md   full spec (philosophy + anti-slop checklist)
  CLAUDE.md          operational design rules

Repo layout (this CLI)

bin/cli.mjs   zero-dependency Node scaffolder (copy template → install → next steps)
template/     the app that gets copied (kept buildable on its own)

To work on the template, develop it as a normal app (cd template && npm install && npm run dev); the CLI just copies it verbatim (minus node_modules/.next) and stamps the project name.

Re-brand

Edit app/globals.css in the generated app: --primary (+ -foreground) for brand, the neutral hue for temperature, --radius for roundness. Token names are shadcn-standard, so npx shadcn add <component> drops in cleanly.