Chromatic Riot Grid

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

:root {
  --background: #09090B;
  --foreground: #0B0B0F;
  --card: #FFFDF4;
  --card-foreground: #0B0B0F;
  --popover: #FFFDF4;
  --popover-foreground: #0B0B0F;
  --primary: #FF2E9F;
  --primary-foreground: #ffffff;
  --secondary: #00E676;
  --secondary-foreground: #111111;
  --muted: #D8D5C7;
  --muted-foreground: #0B0B0F;
  --accent: #00C8FF;
  --accent-foreground: #ffffff;
  --destructive: #D71920;
  --border: #0B0B0F;
  --input: #0B0B0F;
  --ring: #00C8FF;
  --chart-1: #FF2E9F;
  --chart-2: #00E676;
  --chart-3: #00C8FF;
  --chart-4: #007A3D;
  --chart-5: #F2B705;
  --sidebar: #FFFDF4;
  --sidebar-foreground: #0B0B0F;
  --sidebar-primary: #FF2E9F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #0047FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #0B0B0F;
  --sidebar-ring: #00C8FF;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #FF2E9F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00C8FF;
  --accent-foreground: #ffffff;
  --destructive: #D71920;
  --border: #303642;
  --input: #303642;
  --ring: #00C8FF;
  --chart-1: #FF2E9F;
  --chart-2: #00E676;
  --chart-3: #00C8FF;
  --chart-4: #007A3D;
  --chart-5: #F2B705;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #FF2E9F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00C8FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #00C8FF;
  --radius: 0;
}

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 ChromaticRiotGridShadcnKit() {
  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">Chromatic Riot Grid</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": "chromatic-riot-grid",
  "type": "registry:theme",
  "title": "Chromatic Riot Grid shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#09090B",
      "foreground": "#0B0B0F",
      "card": "#FFFDF4",
      "card-foreground": "#0B0B0F",
      "popover": "#FFFDF4",
      "popover-foreground": "#0B0B0F",
      "primary": "#FF2E9F",
      "primary-foreground": "#ffffff",
      "secondary": "#00E676",
      "secondary-foreground": "#111111",
      "muted": "#D8D5C7",
      "muted-foreground": "#0B0B0F",
      "accent": "#00C8FF",
      "accent-foreground": "#ffffff",
      "destructive": "#D71920",
      "border": "#0B0B0F",
      "input": "#0B0B0F",
      "ring": "#00C8FF",
      "chart-1": "#FF2E9F",
      "chart-2": "#00E676",
      "chart-3": "#00C8FF",
      "chart-4": "#007A3D",
      "chart-5": "#F2B705",
      "sidebar": "#FFFDF4",
      "sidebar-foreground": "#0B0B0F",
      "sidebar-primary": "#FF2E9F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#0047FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#0B0B0F",
      "sidebar-ring": "#00C8FF",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FF2E9F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00C8FF",
      "accent-foreground": "#ffffff",
      "destructive": "#D71920",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00C8FF",
      "chart-1": "#FF2E9F",
      "chart-2": "#00E676",
      "chart-3": "#00C8FF",
      "chart-4": "#007A3D",
      "chart-5": "#F2B705",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FF2E9F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00C8FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00C8FF",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-ece7-73c2-b108-f365d28fec99",
    "slug": "chromatic-riot-grid",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# shadcn/ui Components — Chromatic Riot Grid

Author: `katagami-agent`

## ShadSync visual profile

- Family: chromatic neo-brutalist poster grid
- Material: paper slabs on near-black ink with hard saturated underlay rectangles
- Contour: square containers and controls; pill badges only for compact semantic tokens
- Border: 3px solid ink, 6px double focus rings, no blur, no glass
- Motion: 140ms stepped 2px translate with hard shadow snap
- Density: high information density separated by grid lines, mono labels, and neutral reading surfaces
- Accents: hot pink, acid green, cyan, cobalt, solar yellow, and red used as bounded semantic fills, chart keys, and offset underlays

Use generated theme variables from `/shadcn.json`. Import primitives from `@/components/ui/*`; do not create a parallel component system. Keep body copy on paper, ink, or moderated state surfaces that pass contrast.

## Signature component recipes

### button

Use `<Button>` with `rounded-none border-[3px] border-foreground bg-primary text-primary-foreground shadow-[4px_4px_0_var(--foreground)]`. Labels are uppercase mono. Hover translates `translate-x-0.5 translate-y-0.5` and reduces shadow to `2px 2px 0`. Secondary buttons use acid green or paper fills with the same ink outline. Focus uses `ring-[6px] ring-accent ring-offset-2 ring-offset-background`.

### card

Use `<Card>` as a square paper slab: `relative rounded-none border-[3px] border-foreground bg-card text-card-foreground shadow-[12px_12px_0_var(--foreground)]`. Add an absolutely positioned underlay rectangle offset `left-3 top-3` in primary, secondary, accent, or warning; keep content in the paper layer above it.

### input

Use `<Input>` with square corners, 3px ink border, paper background, black text, mono label above, and visible helper text below. Error state adds red left rail plus icon/text, never red-only meaning.

### textarea

Use `<Textarea>` as a large poster field with min-height 144px, 3px border, paper background, and a clipped mono character-count strip. Do not use browser default resize handles without styling.

### select

Use `<Select>` with Trigger styled like the input recipe; menu content is paper with 3px borders, no translucent blur, high-contrast active row, and mono keyboard hints.

### dialog

Use `<DialogContent>` as a centered paper poster slab with 3px border, 14px hard ink shadow, hot pink/cyan offset underlay, and a black label-strip header. Keep destructive actions in bounded red with icons and labels.

### sheet

Use `<SheetContent>` as an edge-attached slab over the near-black grid. It has square corners, 3px border, saturated top status strip, and dense stacked navigation separated by ink rules.

### tabs

Use `<TabsList>` as a bordered paper rail. Triggers are square segments; active tab uses primary or secondary fill with black text only after contrast verification, plus a bottom 6px ink mark.

### badge

Use `<Badge>` for compact semantic chips. Pills are allowed here only: `rounded-full border-[3px] border-foreground px-2.5 py-1 font-mono uppercase`. Pair color with icon glyph or text label.

### separator

Use `<Separator>` as a hard ink rule, usually 3px high/width. For section breaks, double it with a saturated 6px strip offset by 4px.

### checkbox

Use `<Checkbox>` as a square 22px control with 3px ink border and secondary fill when checked. Include visible label text and optional icon; focus ring is 6px accent.

### switch

Use `<Switch>` as a chunky rectangular toggle, not a soft iOS pill. Track has 3px border; thumb snaps by stepped motion and casts a hard 2px shadow.

### slider

Use `<Slider>` with a 6px black track, saturated filled range, square thumb with 3px border and hard shadow. Provide numeric value text nearby for accessibility.

### tooltip

Use `<TooltipContent>` as a small ink or paper label with 3px border, no glass, mono text, and a tiny saturated square pointer/marker.

### dropdown-menu

Use `<DropdownMenuContent>` as a paper slab with 3px border. Items are dense mono rows with icons; destructive rows include red rail and text, not hue alone.

### table

Use `<Table>` for dense operations: paper surface, 3px outer border, black row dividers, mono headers, zebra paper/muted rows, right-aligned numeric columns, and badge/icon state cells.

## Preview shots

- `application-shell`: dark grid workspace with paper dashboard slabs, saturated nav/action collision panels, and semantic status chips.
- `detail-editor`: poster-card editing flow with square inputs, textarea, select, checkbox, switch, slider, tooltip, dialog/sheet affordances, and redundant state messaging.
- `data-operations`: dense table screen with filters, dropdown menu actions, badges, separators, high-contrast charts, and bounded warning/error treatments.

## Copy-paste component example

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

export function RiotGridPanel() {
  return (
    <Card className="relative rounded-none border-[3px] border-foreground bg-card shadow-[12px_12px_0_var(--foreground)] before:absolute before:-z-10 before:left-3 before:top-3 before:h-full before:w-full before:bg-primary">
      <CardHeader className="border-b-[3px] border-foreground">
        <Badge className="w-fit rounded-full border-[3px] border-foreground bg-secondary px-3 py-1 font-mono uppercase text-foreground">live + labeled</Badge>
        <CardTitle className="font-black uppercase tracking-tight">Contrast-checked collision</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-5">
        <Input className="rounded-none border-[3px] border-foreground bg-background font-mono shadow-[4px_4px_0_var(--foreground)]" placeholder="Semantic label" />
        <Button className="rounded-none border-[3px] border-foreground bg-primary font-mono uppercase text-primary-foreground shadow-[4px_4px_0_var(--foreground)] focus-visible:ring-[6px] focus-visible:ring-accent">Commit color role</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019ea9a3-ece7-73c2-b108-f365d28fec99",
    "name": "Chromatic Riot Grid",
    "slug": "chromatic-riot-grid"
  },
  "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": [
    "Use a near-black app shell and paper-white content slabs with 3px black borders so saturated colors appear as contained tokens rather than uncontrolled backgrounds.",
    "Layer offset collision panels in paired primaries and secondaries, with one rectangle translated behind each hero card to create poster-like color clashes.",
    "Reserve saturated fills for buttons, badges, chart chips, and hero blocks while keeping paragraph text on ink, paper, or muted neutral surfaces.",
    "Apply hard-edged grid divisions, square corners, thick focus rings, and label strips so the palette reads neo-brutalist rather than soft gradient maximalism."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Chromatic Riot Grid launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Test every text/background pairing; keep normal text on ink, paper, or moderated state surfaces that meet 4.5:1 contrast.",
      "Use saturated colors as action fills, chart keys, underlays, or large decorative zones with black or paper text only when verified.",
      "Pair state colors with icons, labels, borders, and placement to satisfy non-hue meaning requirements."
    ],
    "dont": [
      "Do not put small body copy directly on hot pink, acid lime, cyan, or yellow unless the exact pair is contrast-tested.",
      "Do not use more than two collision hues in a single component; let the page, not each widget, be maximalist.",
      "Do not soften the system with glassmorphism, blur shadows, rounded SaaS cards, or pastel gradients."
    ]
  }
}