CRT Dream Glow

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

:root {
  --background: #050509;
  --foreground: #F1F7FF;
  --card: #0B0D16;
  --card-foreground: #F1F7FF;
  --popover: #0B0D16;
  --popover-foreground: #F1F7FF;
  --primary: #00E7FF;
  --primary-foreground: #111111;
  --secondary: #FF2BD6;
  --secondary-foreground: #ffffff;
  --muted: #718096;
  --muted-foreground: #718096;
  --accent: #B6FF3B;
  --accent-foreground: #111111;
  --destructive: #FF4D6D;
  --border: #153B4A;
  --input: #153B4A;
  --ring: #00E7FF;
  --chart-1: #00E7FF;
  --chart-2: #FF2BD6;
  --chart-3: #B6FF3B;
  --chart-4: #3BFFB0;
  --chart-5: #FFD166;
  --sidebar: #0B0D16;
  --sidebar-foreground: #F1F7FF;
  --sidebar-primary: #00E7FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #66A3FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #153B4A;
  --sidebar-ring: #B6FF3B;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #00E7FF;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B6FF3B;
  --accent-foreground: #111111;
  --destructive: #FF4D6D;
  --border: #303642;
  --input: #303642;
  --ring: #B6FF3B;
  --chart-1: #00E7FF;
  --chart-2: #FF2BD6;
  --chart-3: #B6FF3B;
  --chart-4: #3BFFB0;
  --chart-5: #FFD166;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #00E7FF;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #B6FF3B;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #B6FF3B;
  --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 CrtDreamGlowShadcnKit() {
  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">CRT Dream Glow</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",
  "cssVars": {
    "dark": {
      "accent": "#B6FF3B",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#00E7FF",
      "chart-2": "#FF2BD6",
      "chart-3": "#B6FF3B",
      "chart-4": "#3BFFB0",
      "chart-5": "#FFD166",
      "destructive": "#FF4D6D",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#00E7FF",
      "primary-foreground": "#111111",
      "radius": "0",
      "ring": "#B6FF3B",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#B6FF3B",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#00E7FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-ring": "#B6FF3B"
    },
    "light": {
      "accent": "#B6FF3B",
      "accent-foreground": "#111111",
      "background": "#050509",
      "border": "#153B4A",
      "card": "#0B0D16",
      "card-foreground": "#F1F7FF",
      "chart-1": "#00E7FF",
      "chart-2": "#FF2BD6",
      "chart-3": "#B6FF3B",
      "chart-4": "#3BFFB0",
      "chart-5": "#FFD166",
      "destructive": "#FF4D6D",
      "foreground": "#F1F7FF",
      "input": "#153B4A",
      "muted": "#718096",
      "muted-foreground": "#718096",
      "popover": "#0B0D16",
      "popover-foreground": "#F1F7FF",
      "primary": "#00E7FF",
      "primary-foreground": "#111111",
      "radius": "0",
      "ring": "#00E7FF",
      "secondary": "#FF2BD6",
      "secondary-foreground": "#ffffff",
      "sidebar": "#0B0D16",
      "sidebar-accent": "#66A3FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#153B4A",
      "sidebar-foreground": "#F1F7FF",
      "sidebar-primary": "#00E7FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-ring": "#B6FF3B"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e6c90-e12a-7833-b2a6-5e499a735391",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "destructive",
        "error",
        "foreground",
        "info",
        "input",
        "muted",
        "muted_foreground",
        "neutral",
        "primary",
        "ring",
        "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"
      ]
    },
    "slug": "crt-dream-glow",
    "source": "katagami"
  },
  "name": "crt-dream-glow",
  "title": "CRT Dream Glow shadcn Theme",
  "type": "registry:theme"
}

# CRT Dream Glow shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate CRT Dream Glow into shadcn/ui as a disciplined terminal product surface: black scanline cards, square geometry, cyan structural edges, magenta ghost offsets, and pixel-cell data widgets.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table from `@/components/ui/*`.

## Token cues
Use `background` as near-black CRT glass, `primary` for cyan structure, `secondary` for magenta command focus, `accent` for lime live states, `border` for dim grid lines, square radii, and stepped transitions. Body text remains off-white and never blurred.

## Visual character to preserve
- Add scanline underlays to app shells and cards with low-opacity repeating gradients.
- Give important cards a cyan border plus a lower-right magenta pseudo-shadow.
- Use square controls, 2px focus outlines, and pixel-cell meters for status.
- Reserve bloom for active badges, selected tabs, primary buttons, and chart traces.

## ShadSync visual profile
family: `crt-pixel-terminal`; material: black phosphor glass; contour: square clipped notch; border: cyan hairline with magenta offset; underlay: scanlines and 8px bitmap grid; grain: phosphor noise; stickerBadges: false; motion: `steps(4,end)` brightness shifts; density: high but grouped; accents: cyan, neon magenta, lime.

## Signature component recipes
- `button`: square, uppercase mono, 2px cyan border, magenta `box-shadow: 3px 3px 0`, hot variant swaps to magenta fill and cyan shadow.
- `card`: black surface, `clip-path` notched corners, dim cyan border, optional scanline `before` overlay, magenta ghost `after` offset.
- `input`, `textarea`, `select`: graphite fill, cyan left rule, mono value text, focus ring as 2px cyan plus magenta lower-right shadow.
- `dialog`, `sheet`: full CRT glass panels with notched corners, strong scanline underlay, headers in Share Tech Mono with RGB text-shadow.
- `tabs`: selected tab glows cyan; inactive tabs are dim bordered rectangles aligned to 8px gutters.
- `badge`: compact mono capsule or square chip with a 6px pixel diode; lime for live, magenta for command, cyan for system.
- `separator`: 1px dim cyan rule overlaid with sparse 8px bright ticks.
- `checkbox`, `switch`, `slider`: square handles, no soft knobs; active parts are cyan cells with magenta offset shadows.
- `tooltip`, `dropdown-menu`: black terminal popovers, cyan border, no radius, pixel-notch corner on the top edge.
- `table`: dense mono rows, dim grid lines, cyan header strip, colored status text only in state cells.

## Preview shots
1. `application-shell`: sprite broadcast console with command rail, live viewport card, status meters, and packet table.
2. `detail-editor`: CRT calibration dialog/sheet for editing bloom, scanline, and RGB offset fields.
3. `data-operations`: dense tile-cache table with filters, dropdown actions, sliders, switches, badges, and tooltips.

## Implementation contract
Import local shadcn primitives from `@/components/ui/*`; do not invent a second component system. Add language-specific className recipes around primitives and keep focus states accessible. Preserve square radii, 8px spacing, scanline underlays, and cyan/magenta misregistration.

## 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 CrtDreamPanel() {
  return (
    <Card className="relative overflow-hidden rounded-none border border-cyan-400/50 bg-[#0B0D16] shadow-[3px_3px_0_rgba(255,43,214,.45),0_0_28px_rgba(0,231,255,.12)] before:absolute before:inset-0 before:pointer-events-none before:bg-[repeating-linear-gradient(0deg,rgba(255,255,255,.06)_0_1px,transparent_1px_4px)]">
      <CardHeader className="relative z-10 border-b border-cyan-950/80">
        <Badge className="w-fit rounded-none border border-lime-300/60 bg-lime-300/10 font-mono text-lime-200">LIVE PHOSPHOR</Badge>
        <CardTitle className="font-['Share_Tech_Mono'] text-3xl text-cyan-100 [text-shadow:2px_0_#FF2BD6,-2px_0_#00E7FF]">Signal Loom</CardTitle>
      </CardHeader>
      <CardContent className="relative z-10 grid gap-3 p-4">
        <Input className="rounded-none border-cyan-400/50 bg-black/40 font-mono focus-visible:ring-2 focus-visible:ring-cyan-300" defaultValue="RGB Δ 02PX" />
        <Button className="rounded-none border-2 border-cyan-300 bg-cyan-950/50 font-mono uppercase text-cyan-100 shadow-[3px_3px_0_rgba(255,43,214,.55)] hover:bg-cyan-800/50">Commit Glow</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Square shadcn button using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "card",
      "recipe": "Square shadcn card using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "input",
      "recipe": "Square shadcn input using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "textarea",
      "recipe": "Square shadcn textarea using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "select",
      "recipe": "Square shadcn select using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "dialog",
      "recipe": "Square shadcn dialog using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "sheet",
      "recipe": "Square shadcn sheet using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "tabs",
      "recipe": "Square shadcn tabs using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "badge",
      "recipe": "Square shadcn badge using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "separator",
      "recipe": "Square shadcn separator using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "checkbox",
      "recipe": "Square shadcn checkbox using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "switch",
      "recipe": "Square shadcn switch using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "slider",
      "recipe": "Square shadcn slider using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "tooltip",
      "recipe": "Square shadcn tooltip using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Square shadcn dropdown-menu using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    },
    {
      "component": "table",
      "recipe": "Square shadcn table using CRT Dream Glow tokens, cyan structural border, restrained magenta ghost offset, mono labels, and no rounded default styling."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic SaaS dashboard cards",
        "rounded glass panels",
        "rainbow neon overload"
      ],
      "composition": "Asymmetric terminal workbench with command rail, large live sprite viewport, right telemetry cards, and packet table.",
      "id": "application-shell",
      "mustShowStates": [
        "active cyan selected tab",
        "magenta hot command button",
        "lime live badge",
        "table rows with warning and error states"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "switch",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Calibrate",
          "Commit Glow"
        ],
        "description": "Operators tune scanline masks, sprite occlusion, and RGB ghost offsets before committing a live pixel broadcast.",
        "eyebrow": "SPRITE BROADCAST CONSOLE",
        "headline": "Night Arcade Signal Loom",
        "rows": [
          {
            "latency": "12ms",
            "packet": "tile-cache / north",
            "state": "synced"
          },
          {
            "latency": "44ms",
            "packet": "boss-sprite atlas",
            "state": "warming"
          },
          {
            "latency": "02px",
            "packet": "rgb ghost layer",
            "state": "offset"
          }
        ],
        "stats": [
          {
            "label": "scan drift",
            "value": "0.28px"
          },
          {
            "label": "cyan bloom",
            "value": "74%"
          },
          {
            "label": "sprite cells",
            "value": "1,936"
          }
        ]
      }
    },
    {
      "avoid": [
        "soft modal radius",
        "unlabeled decorative controls"
      ],
      "composition": "Notched calibration sheet over a dark map, with stacked fields and pixel sliders for bloom, dithering, and offset.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with cyan ring and magenta shadow",
        "checked square checkbox",
        "slider made of cell-like track segments"
      ],
      "primitives": [
        "dialog",
        "sheet",
        "input",
        "textarea",
        "select",
        "slider",
        "checkbox",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Preview Pass",
          "Save Offset"
        ],
        "description": "Fine tune the live CRT material without sacrificing legibility in the packet table.",
        "eyebrow": "CALIBRATION SHEET",
        "fields": [
          {
            "label": "RGB ghost offset",
            "value": "2px"
          },
          {
            "label": "Dither kernel",
            "value": "ordered 4x4"
          },
          {
            "label": "Operator note",
            "value": "Keep magenta on command edges only."
          }
        ],
        "headline": "Edit Phosphor Pass 08"
      }
    },
    {
      "avoid": [
        "inventory wall layout",
        "unstyled default table density"
      ],
      "composition": "Dense operations table with filters, compact status badges, and command dropdowns inside a scanlined black card.",
      "id": "data-operations",
      "mustShowStates": [
        "open dropdown menu",
        "cyan table header",
        "lime success badge",
        "magenta destructive action"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "select",
        "input",
        "badge",
        "separator",
        "switch",
        "button",
        "tooltip",
        "card"
      ],
      "scene": {
        "actions": [
          "Export Frame Log",
          "Invalidate Selected"
        ],
        "description": "A dense bitmap-grid operations view for cache invalidation and sprite atlas health.",
        "eyebrow": "TILE CACHE OPERATIONS",
        "headline": "Packet Queue Audit",
        "rows": [
          {
            "owner": "render bus",
            "packet": "atlas-07",
            "state": "stable"
          },
          {
            "owner": "color pass",
            "packet": "palette-lut",
            "state": "review"
          },
          {
            "owner": "crt pass",
            "packet": "scanline-mask",
            "state": "live"
          }
        ],
        "stats": [
          {
            "label": "queued packets",
            "value": "128"
          },
          {
            "label": "dropped frames",
            "value": "03"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "cyan bloom",
      "neon magenta commands",
      "lime live state"
    ],
    "border": "cyan hairline with magenta offset ghost",
    "contour": "square clipped notch",
    "density": "high grouped terminal density",
    "family": "crt-pixel-terminal",
    "grain": true,
    "material": "black phosphor glass",
    "motion": "steps(4,end) brightness shifts",
    "stickerBadges": false,
    "underlay": true
  }
}