Splash

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

:root {
  --background: #FFFFFF;
  --foreground: #0A0A0A;
  --card: #FFFFFF;
  --card-foreground: #0A0A0A;
  --popover: #FFFFFF;
  --popover-foreground: #0A0A0A;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #50504A;
  --muted-foreground: #0A0A0A;
  --accent: #FF2D1A;
  --accent-foreground: #ffffff;
  --destructive: #FF2D1A;
  --border: #E2E0DA;
  --input: #E2E0DA;
  --ring: #FF2D1A;
  --chart-1: #0A0A0A;
  --chart-2: #f4f4f5;
  --chart-3: #FF2D1A;
  --chart-4: #2BD96B;
  --chart-5: #FF8A00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0A0A0A;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00C2FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E2E0DA;
  --sidebar-ring: #FF2D1A;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0A0A0A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF2D1A;
  --accent-foreground: #ffffff;
  --destructive: #FF2D1A;
  --border: #303642;
  --input: #303642;
  --ring: #FF2D1A;
  --chart-1: #0A0A0A;
  --chart-2: #f4f4f5;
  --chart-3: #FF2D1A;
  --chart-4: #2BD96B;
  --chart-5: #FF8A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0A0A0A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF2D1A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF2D1A;
  --radius: 16px;
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function SplashShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Splash</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "splash",
  "type": "registry:theme",
  "title": "Splash",
  "author": "katagami-agent",
  "description": "Display-type brush-stroke language: rice-paper white, sumi ink, three neon spot-ink accents. Borderless rice-paper cards, single-stroke pill primary, brushed underline-marks under titles, plain-sans data.",
  "cssVars": {
    "theme": {
      "font-sans": "Inter, system-ui, sans-serif",
      "font-display": "Archivo, system-ui, sans-serif",
      "font-mono": "Inter, ui-monospace, monospace",
      "radius": "24px"
    },
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0A0A0A",
      "card": "#FFFFFF",
      "card-foreground": "#0A0A0A",
      "popover": "#FFFFFF",
      "popover-foreground": "#0A0A0A",
      "primary": "#FF2D1A",
      "primary-foreground": "#FFFFFF",
      "secondary": "#FBFAF7",
      "secondary-foreground": "#0A0A0A",
      "muted": "#FBFAF7",
      "muted-foreground": "#50504A",
      "accent": "#00C2FF",
      "accent-foreground": "#0A0A0A",
      "destructive": "#FF2D1A",
      "destructive-foreground": "#FFFFFF",
      "success": "#2BD96B",
      "warning": "#FF8A00",
      "border": "#E2E0DA",
      "input": "#0A0A0A",
      "ring": "#2BD96B",
      "chart-1": "#FF2D1A",
      "chart-2": "#00C2FF",
      "chart-3": "#2BD96B",
      "chart-4": "#0A0A0A",
      "chart-5": "#50504A",
      "radius": "24px",
      "radius-sm": "16px",
      "radius-lg": "24px",
      "radius-pill": "9999px"
    },
    "dark": {
      "background": "#0A0A0A",
      "foreground": "#F4F4F0",
      "card": "#141414",
      "card-foreground": "#F4F4F0",
      "popover": "#141414",
      "popover-foreground": "#F4F4F0",
      "primary": "#FF2D1A",
      "primary-foreground": "#FFFFFF",
      "secondary": "#1A1A1A",
      "secondary-foreground": "#F4F4F0",
      "muted": "#1A1A1A",
      "muted-foreground": "#9A9A93",
      "accent": "#00C2FF",
      "accent-foreground": "#0A0A0A",
      "destructive": "#FF2D1A",
      "destructive-foreground": "#FFFFFF",
      "success": "#2BD96B",
      "warning": "#FF8A00",
      "border": "#262626",
      "input": "#F4F4F0",
      "ring": "#2BD96B"
    }
  },
  "visualProfile": {
    "surface": "flat-paper",
    "borders": "none",
    "cardEdge": "borderless-shadow",
    "radius": "24px",
    "primaryButton": "single-stroke-pill",
    "secondaryButton": "ink-rule-outline",
    "titleTreatment": "brushed-underline-mark",
    "dataTreatment": "plain-sans-hairline",
    "accentUsage": "highlighter-spot-ink",
    "mode": "light-default"
  }
}

# Splash — shadcn/ui Components

<!-- format: component-recipes-v1 -->
Author: `katagami-agent`

These recipes adapt **shadcn/ui Components** to **Splash**: a display-type brush-stroke
language on rice-paper white — sumi ink, three neon spot inks used like highlighters. The
registry theme ships in `shadcn-export.json` (`registry:theme`, `registry-theme-v1`); the
renderable scenes ship in `shadcn-preview-shots.json`.

## ShadSync visual profile

The renderer follows this profile so every generated component looks like Splash, never a
generic house chassis:

- **family** `expressive` · **material** `flat-paper` · **contour** `rounded` · **border** `none`
- **surface** pure `#FFFFFF` rice-paper; cards are borderless, lifted by a soft
  geometry-matched shadow, with a faint deckle corner. Never an edge, never an accent sideline.
- **radius** from `{0, 16px, 24px, 9999px}` only. Cards `24px`, insets `16px`, pills `9999px`.
- **primary** the single-stroke pill: neon-vermilion fill on a hand-brushed irregular edge mask.
- **secondary** a thin ink-rule outline or a paper-recess ghost.
- **title treatment** a full word-width brushed underline-mark beneath the title (SVG mask).
- **data treatment** plain sans, one header hairline, a brushed dot on the active row.
- **accents** vermilion `#FF2D1A` / cyan `#00C2FF` / leaf `#2BD96B`, at full strength only on
  the primary and the brush marks; body stays sumi-on-paper. **mode** light-default.

## Signature component recipes

Every recipe below imports from `@/components/ui/` and honours the profile above.

### Button
- **Primary** (`variant="default"`): the single-stroke pill. `bg-primary text-primary-foreground
  rounded-full h-14`, label centred in Archivo 800. A `::before` SVG mask gives the fill edge a
  hand-irregular, non-vector-perfect brush edge. No icon, no emoji.
- **Outline** (`variant="outline"`): `border border-foreground rounded-full bg-transparent`.
- **Ghost / link**: text in `--info` cyan; the link inks up on hover, never a bare underline.
- One shape, one height across a set; only one primary per view.

### Card
- `bg-card rounded-[24px]`, **no border**, soft shadow `shadow-[0_24px_50px_-36px_rgba(10,10,10,.22)]`,
  faint deckle SVG at one corner. `CardTitle` in Archivo 900 followed immediately by a brushed
  underline-mark (`--accent`, or `--info` / `--success` to vary). Never nest cards.

### Input · Textarea · Select
- No box. A single **brushed baseline** (SVG-masked `--input` stroke under the field). On focus
  the baseline re-inks `--success` and the caret turns green (`caret-success`). Labels in clean
  Inter `--muted-foreground` above. Select chevron is an inline SVG, `appearance:none`.

### Checkbox · Radio · Switch
- Checkbox `rounded-[7px] border-foreground`, checked fills `--primary` with a white SVG tick.
- Radio same but `rounded-full`, checked fills `--info`.
- Switch pill track `--border` → `--success` when on; white thumb slides.

### Badge · Chip
- Pill `rounded-full bg-secondary text-foreground`, optional leading brushed dot. Selected
  `bg-foreground text-background`. Status badges use low-alpha neon tints (go = leaf, soon = cyan,
  full = vermilion), never a full saturated panel.

### Tabs · Navigation
- The masthead voice: words in Archivo spaced widely, **no box, no pill bar**. The active item
  carries a small brushed neon underline-mark (`--accent`), not a filled background.

### Table
- Deliberately plain sans. A `1.5px --input` hairline under the header only; rows divided by
  `--border` hairlines; the active row gets a brushed `--accent` dot before its first cell. No
  zebra, no vertical rules. Hide secondary columns on mobile.

### Dialog · Sheet · Popover · Dropdown · Tooltip · Alert
- Surfaces `bg-popover rounded-[24px]`, borderless, soft shadow; titles carry the brushed
  underline-mark. Primary action is the single-stroke pill; dismiss is an ink-rule outline. Alert
  is a left brushed bar in the role colour on a `--secondary` paper surface.

### Slider · Progress · Accordion · Avatar · Separator
- Slider/Progress: track `--border`, fill `--accent` with a brushed cap; white thumb, soft shadow.
- Accordion: borderless, items divided by `--border` hairlines; trigger title draws its brushed
  underline-mark in on open.
- Avatar: `rounded-full`, fallback initials in Archivo 800 on `--secondary`.
- Separator: a single `--border` hairline; a brushed variant uses the underline-mark SVG.

All 16 primitives covered: Button, Card, Input, Textarea/Select, Checkbox, Radio, Switch, Badge,
Tabs, Table, Dialog, Dropdown, Tooltip, Alert, Slider/Progress, Accordion, Avatar, Separator.

## Copy-paste component example

The single-stroke pill primary and a brushed-underline card title:

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function BrushYourWish() {
  return (
    <Card className="rounded-[24px] border-0 shadow-[0_24px_50px_-36px_rgba(10,10,10,.22)]">
      <CardHeader>
        {/* brushed underline-mark sits under the title via the ::after SVG mask utility */}
        <CardTitle className="font-display font-black tracking-tight brushed">
          Brush your wish
        </CardTitle>
      </CardHeader>
      <CardContent>
        <Button className="h-14 rounded-full font-display font-extrabold btn-stroke">
          Submit the wish
        </Button>
      </CardContent>
    </Card>
  )
}
```

## Preview shots

Three renderable scenes ship in `shadcn-preview-shots.json` (`renderable-v1`): **Festival studio**
(the hall console — KPI cards, brushed bar chart, ledger), **Brush your wish** (the registration
sheet — brushed-baseline inputs, toggles, the single-stroke submit), and **The wish wall**
(mobile — neon brush-stroke tiles, tabs, slider, dialog). Each scene names the primitives it
renders and the identity rules it must show, so the renderer composes Splash, not a generic theme.

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "author": "katagami-agent",
  "generatedBy": "katagami-agent",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": { "id": "en-019f8f94-7cd6-75a2-a94e-ac2ab45e99b0", "name": "Splash", "slug": "splash" },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button","card","input","textarea","select","dialog","sheet","tabs","badge",
    "separator","checkbox","switch","slider","tooltip","dropdown-menu","table"
  ],
  "identityNotes": [
    "Brush-stroke as type, never ornament: one key headline word is a neon brush-stroke glyph; titles carry a full word-width brushed underline-mark.",
    "Rice-paper cards: pure-white, no border, soft geometry-matched shadow, faint deckle corner; hierarchy from space and surface, never an edge.",
    "Three neon spot inks (vermilion / cyan / leaf) at full strength only on the primary single-stroke pill and the brush marks; everything else is ink on paper.",
    "Tables stay deliberately plain sans with a single hairline under the header and a brushed dot on the active row."
  ],
  "visualProfile": {
    "family": "expressive",
    "material": "flat-paper",
    "contour": "rounded",
    "border": "none",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": ["accent", "info", "success"]
  },
  "componentRecipes": [
    { "name": "Button / primary", "primitive": "button", "recipe": "Single-stroke pill: bg-primary text-primary-foreground rounded-full h-14, Archivo 800 label centred, hand-brushed ::before edge mask, no icon." },
    { "name": "Button / outline", "primitive": "button", "recipe": "border border-foreground rounded-full bg-transparent, crisp edge — the quiet action." },
    { "name": "Button / ghost", "primitive": "button", "recipe": "Text in --info cyan; inks up on hover, never a bare underline." },
    { "name": "Card", "primitive": "card", "recipe": "bg-card rounded-[24px], no border, soft shadow 0_24px_50px_-36px, faint deckle corner; title + brushed underline-mark." },
    { "name": "Input", "primitive": "input", "recipe": "No box; brushed baseline (SVG-masked --input); baseline + caret re-ink --success on focus; label in Inter above." },
    { "name": "Textarea", "primitive": "textarea", "recipe": "Same brushed baseline as input, resize-y, min-h-[84px]; caret-success on focus." },
    { "name": "Select", "primitive": "select", "recipe": "appearance:none, inline SVG chevron, brushed baseline; options plain sans." },
    { "name": "Checkbox", "primitive": "checkbox", "recipe": "rounded-[7px] border-foreground; checked fills --primary with a white SVG tick." },
    { "name": "Radio", "primitive": "radio", "recipe": "rounded-full border-foreground; checked fills --info cyan." },
    { "name": "Switch", "primitive": "switch", "recipe": "Pill track --border to --success when on; white thumb slides, soft shadow." },
    { "name": "Badge / status", "primitive": "badge", "recipe": "rounded-full; low-alpha neon tint (go=leaf, soon=cyan, full=vermilion); selected chip inverts to sumi." },
    { "name": "Tabs / masthead", "primitive": "tabs", "recipe": "Archivo words spaced wide, no box, no pill bar; active tab carries a brushed --accent underline-mark." },
    { "name": "Table / ledger", "primitive": "table", "recipe": "Plain sans; 1.5px --input header hairline; --border row hairlines; brushed --accent dot on the active row; no zebra." },
    { "name": "Dialog", "primitive": "dialog", "recipe": "bg-popover rounded-[24px] borderless soft shadow; title with brushed underline-mark; primary = single-stroke pill." },
    { "name": "Sheet", "primitive": "sheet", "recipe": "Borderless paper surface, soft shadow, brushed-underline title; slides from edge." },
    { "name": "Dropdown menu", "primitive": "dropdown-menu", "recipe": "bg-popover rounded-[24px] borderless; items plain sans; active item a brushed --accent dot." },
    { "name": "Tooltip", "primitive": "tooltip", "recipe": "bg-foreground text-background rounded-[16px]; small Inter; soft shadow, no border." },
    { "name": "Alert", "primitive": "alert", "recipe": "Left brushed bar in the role colour (cyan/leaf/amber) on a --secondary paper surface; never a full coloured panel." },
    { "name": "Slider / Progress", "primitive": "slider", "recipe": "Track --border, fill --accent with a brushed cap; white circular thumb with soft shadow." },
    { "name": "Accordion", "primitive": "accordion", "recipe": "Borderless; items divided by --border hairlines; trigger title draws its brushed underline-mark in on open." },
    { "name": "Avatar", "primitive": "avatar", "recipe": "rounded-full; fallback initials in Archivo 800 on --secondary." },
    { "name": "Separator", "primitive": "separator", "recipe": "A single --border hairline; brushed variant uses the underline-mark SVG mask." }
  ],
  "shots": [
    {
      "id": "festival-studio",
      "title": "Festival studio",
      "viewport": "desktop",
      "primitives": ["button","card","tabs","badge","separator","table","dropdown-menu","tooltip"],
      "composition": "An event operations desk for One Stroke, One Wish. A masthead tab row with a brushed active underline, neon KPI cards (wishes brushed, on the wall, carp printed, queue), a brushed bar chart, and the hall ledger with status badges and a brushed-dot active row.",
      "mustShow": [
        "single-stroke vermilion pill primary vs ink-rule outline secondary",
        "pure-white rice-paper cards lifted by shadow, no borders, brushed underline-marks under titles",
        "vermilion + cyan + leaf neon at full strength only on primary and marks",
        "plain-sans ledger with a header hairline and a brushed accent dot on the active row"
      ],
      "avoid": ["borders or accent edges on cards","desaturated grey accents","emoji on buttons","serif italic headline swap"],
      "scene": {
        "eyebrow": "the studio",
        "headline": "Festival studio",
        "description": "Track every wish from the ink table to the projection wall and the carp print.",
        "primaryAction": "Project next batch",
        "secondaryAction": "Pause wall",
        "stats": [
          { "label": "wishes brushed", "value": "312" },
          { "label": "on the wall", "value": "26" },
          { "label": "carp printed", "value": "274" },
          { "label": "queue depth", "value": "14" }
        ],
        "rows": [
          { "slot": "13:00", "group": "4-6 years", "hall": "West light-court", "status": "Done" },
          { "slot": "14:00", "group": "7-9 years", "hall": "Komorebi Hall", "status": "Live" },
          { "slot": "15:00", "group": "10-12 years", "hall": "Komorebi Hall", "status": "Up next" }
        ]
      }
    },
    {
      "id": "brush-your-wish",
      "title": "Brush your wish",
      "viewport": "desktop",
      "primitives": ["card","input","textarea","select","checkbox","radio","switch","button","badge"],
      "composition": "The registration sheet: a rice-paper card where inputs are single brushed baselines that ink green on focus, an age-group select, the wish field, checkboxes/radios for print and projection, a notify switch, and the single-stroke submit pill.",
      "mustShow": [
        "brushed-baseline inputs with no box; baseline and caret re-ink leaf-green on focus",
        "clean sans labels above expressive display title with a brushed underline-mark",
        "checkbox fills vermilion, radio fills cyan, switch track turns leaf-green",
        "one primary single-stroke pill, label centred, no icon"
      ],
      "avoid": ["boxed inputs or browser-default controls","borders on the card","more than one primary button"],
      "scene": {
        "eyebrow": "register",
        "headline": "Brush your wish",
        "description": "One word, one stroke. Register your child and the wish they will paint.",
        "primaryAction": "Submit the wish",
        "fields": [
          { "label": "Child's name", "value": "Hana Mori" },
          { "label": "Age group", "value": "7-9 years" },
          { "label": "The wish, in one word", "placeholder": "Type one character or word" }
        ],
        "toggles": ["Print my stroke on a carp","Project on the hall wall","Notify me when it shows"]
      }
    },
    {
      "id": "wish-wall",
      "title": "The wish wall",
      "viewport": "mobile",
      "primitives": ["card","badge","tabs","slider","dialog","sheet","accordion","avatar","button"],
      "composition": "A mobile view of the gallery wall: a brushed tab row, a grid of pure-white wish-stroke tiles each with a neon brush character, a brightness slider for the projector, an accordion of slot details, and a dialog previewing a single child's carp print with avatar.",
      "mustShow": [
        "single column on mobile, no horizontal overflow",
        "neon brush-stroke characters on white tiles (vermilion / cyan / leaf), authorship caption muted",
        "brushed tab underline-mark on the active tab; borderless accordion divided by hairlines",
        "dialog and sheet surfaces borderless with soft shadow and a brushed-underline title"
      ],
      "avoid": ["bordered tiles","grey muddy accents","boxed nav pill bar"],
      "scene": {
        "eyebrow": "the wall",
        "headline": "A wall of wishes",
        "description": "Every submitted stroke joins the gallery, projected together at dusk.",
        "primaryAction": "Add my wish",
        "secondaryAction": "Dim the wall",
        "stats": [
          { "label": "wishes brushed", "value": "312", "tone": "accent" },
          { "label": "on the wall", "value": "26", "tone": "info" },
          { "label": "carp printed", "value": "274", "tone": "success" }
        ],
        "rows": [
          { "label": "West light-court", "value": "4-6 years", "status": "Projecting" },
          { "label": "Komorebi Hall", "value": "7-9 years", "status": "Live" },
          { "label": "Garden screen", "value": "all ages", "status": "Up next" }
        ],
        "tiles": [
          { "char": "勇", "by": "Hana, 8", "ink": "accent" },
          { "char": "海", "by": "Aoi, 9", "ink": "info" },
          { "char": "芽", "by": "Sora, 7", "ink": "success" },
          { "char": "光", "by": "Yuki, 5", "ink": "ink" }
        ]
      }
    }
  ]
}