jixoai-ui · v0.1 · shadcn registry
The terminal design language of jixoai. One hue per project.
Everything here graduated from production work on unipty and openspecui: an OKLCH token law where a project's entire identity is a single --brand-hue variable, hard offset shadows, a mono-first voice, and components you own after copying them in.
$npx jixoai-ui init --hue 330
registries["@jixoai"] ✓ jixoai.brandHue: 330 ✓
jixoai-theme installed → src/lib/jixoai.css
try: npx jixoai-ui add toc press-button
Why
Law 01
One-Hue Law
Every color is OKLCH with fixed lightness and chroma; a project's whole identity is one CSS variable: --brand-hue. Dark mode drifts it -4°. Two jixoai sites never differ in anything except this number and their content — play with it on the Tokens page.
Law 02
A shadcn registry, not a package
Components live in your repo after `npx jixoai-ui add` — same-source files, no runtime dependency, no version lock. The registry JSON this site documents is served from /r/ on this very domain.
Law 03
Dogfooded by this site
This page is built from the exact files the registry ships: the token sheet, the data-reveal + CSS entrance law (scroll-triggered by the theme sheet — static markup, no runtime action), press buttons, section cards, and the Combo ToC on the Components page. If the registry regresses, this site visibly regresses with it.
Install
Two commands and the design language is yours
The CLI extends shadcn's components.json, installs the token sheet, and writes your hue. Components arrive as same-source files in your repo — no package to depend on, nothing to upgrade against your will.
# register the @jixoai namespace, install the theme, set the hue
npx jixoai-ui init --hue 330
# add components (delegates to shadcn, re-applies the hue)
npx jixoai-ui add press-button section-card toc{
"registries": {
"@jixoai": "https://ui.jixoai.com/r/{name}.json"
}
}Non-Svelte projects still benefit: jixoai-theme and toc-engine are framework-free. Read the full law on the tokens page and
every component live on the docs page.
Catalog
148 items, one grammar — registry total
registry.json advertises 148 items, every one listed on the docs index and served as JSON from this domain. The 11 rows below are the curated featured tour, not the total.
| Item | Type | What it is | Copy-ready add |
|---|---|---|---|
| jixoai-theme | registry:theme | The jixoai design-language token sheet: OKLCH colors with the one-brand-hue law, hard offset shadows, radius 0 with bevel upgrade, mono-first fonts, terminal surfaces, and the data-reveal entrance styles (static markup + CSS). | npx jixoai-ui add jixoai-theme |
| toc-engine | registry:lib | Framework-free table-of-contents engine: per-frame geometry snapshot computes IoM weights (intersection area / min(block, viewport) — saturates to 100% in both directions) and the line pick (the viewport-top line resolves to the region containing it; margins resolve DOWNWARD to the next block; mobile line sits at the sticky bar bottom + 2em). Region source is [data-region]/[data-family] markup, OR — new in the scroll-area family (2026-08-22) — a derived-extents provider (the toc-outline lib): heading extents synthesized at compute time, re-read live every pass. | npx jixoai-ui add toc-engine |
| press-button | registry:ui | The press-law button (theme .jx-press): hover grows the shadow only (xs → sm, the body never moves); active presses the body +1px into the page while the box-shadow offsets counter-shrink 1px (the *-press token poses) — the shadow paint stays anchored, no pseudo layer. Variant ladder: fill / tonal / outline (default) / ghost + link (an interaction-affordance exception, not a surface rung); hue is injection through --jx-fill/--jx-fill-ink/--jx-tonal/--jx-outline (destructive ACTIONS inject the destructive pair, copied-style feedback = tonal + success). One opt-in effect loop per button via typed builders exported from the module script — shimmer() additive perimeter spark (plus-lighter, box-owned clip), pulse() sonar rings (slow/ring/ripple), rainbow() blended aurora wash (conic, three prime timelines, screen on fill / color elsewhere), ripple() press-point ink driven by WAAPI and removed on animation.finished (runtime extracted to ripple.svelte.ts, shared with Chip), with a round/bevel-diamond shape option — modeled on the animation-svelte reference, options on every loop, frozen under reduced motion. | npx jixoai-ui add press-button |
| section-card | registry:ui | The content atom of the jixoai site grammar: bordered card, header block with eyebrow (brand hue, Share Tech Mono, tracked), font-nav title, text-pretty summary, body snippet slot. | npx jixoai-ui add section-card |
| terminal-header | registry:ui | The site header as composed chrome: the bar shell, brand block, pill box with its sliding indicator, and the mobile drawer — the NAVIGATION is composed NavigationMenuItem/Trigger/Panel parts (consumer-authored mega grids) with bare NavigationMenuLinks; the three-level TerminalNavItem config tree is dead. closeAll() hides every open popover under the header; open is bindable for the drawer. | npx jixoai-ui add terminal-header |
| terminal-footer | registry:ui | The site footer as composed chrome: TerminalFooter owns the © row + ghost fallback; TerminalFooterColumn (title + free link children) composes the columns. | npx jixoai-ui add terminal-footer |
| theme-toggle | registry:ui | light / dark / system control in four variants: full (segmented icon+label selector), compact (icon + current), icon (icon only), text (label only). Inline SVG icons, no icon-library dependency; shared theme contract (localStorage theme, .dark + colorScheme). | npx jixoai-ui add theme-toggle |
| toc | registry:ui | The reading rail as a composed family: manual mode composes TocList/TocItem/TocLink(child) — a legal list tree (anchors never nest); AUTO mode (outline: TocOutlineConfig) derives from headings at runtime — the DECLARED SSR exception (rail shell first, links on hydrate). Scrollspy is Root behavior, DOM-delegated. | npx jixoai-ui add toc |
| terminal-card | registry:ui | The Broadside hero terminal, composed after the openspecui reference: traffic-light title bar, one large typed command line, outputs surfacing line by line, 6px hard offset shadow. One-shot typing entrance (never looping), static block cursor (jixoai motion law), prerendered/no-JS shows the settled terminal, reduced motion renders instantly. | npx jixoai-ui add terminal-card |
| hero-section | registry:ui | The landing hero with opened content: title/badges/terminal/secondary/copy are snippets (the caller composes Badge children; the default copy CTA rides the copyCommand payload; the em accent paint lives in family css). | npx jixoai-ui add hero-section |
| website-scaffold | registry:ui | WebsiteScaffold — the page scaffold for presentation sites (traditional websites) around terminal-header: a sticky, always-visible header band (navigation never scrolls away), main column, optional footer, and a skip link. Ships the systematized MPA view transitions: cross-document navigation with a persistent site-header and a horizontal-slide + blur crossfade on page-main (reduced-motion degrades to crossfade). Pair with view-transitions-toolkit's useAutoTypes() (render-blocking) for from-/to-route typed variants. Renamed from app-shell: an AppScaffold for application-style sites is a separate future design. | npx jixoai-ui add website-scaffold |