Terminal Brutalist Interface

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

:root {
  --background: #050706;
  --foreground: #D6FFE4;
  --card: #0A0E0B;
  --card-foreground: #D6FFE4;
  --popover: #0A0E0B;
  --popover-foreground: #D6FFE4;
  --primary: #39FF88;
  --primary-foreground: #111111;
  --secondary: #F2A23A;
  --secondary-foreground: #ffffff;
  --muted: #6E8A74;
  --muted-foreground: #D6FFE4;
  --accent: #B6FF4D;
  --accent-foreground: #111111;
  --destructive: #FF5A3D;
  --border: #21442E;
  --input: #21442E;
  --ring: #B6FF4D;
  --chart-1: #39FF88;
  --chart-2: #F2A23A;
  --chart-3: #B6FF4D;
  --chart-4: #39FF88;
  --chart-5: #F2A23A;
  --sidebar: #0A0E0B;
  --sidebar-foreground: #D6FFE4;
  --sidebar-primary: #39FF88;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #55D7FF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #21442E;
  --sidebar-ring: #B6FF4D;
  --radius: 0px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #39FF88;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #B6FF4D;
  --accent-foreground: #111111;
  --destructive: #FF5A3D;
  --border: #303642;
  --input: #303642;
  --ring: #B6FF4D;
  --chart-1: #39FF88;
  --chart-2: #F2A23A;
  --chart-3: #B6FF4D;
  --chart-4: #39FF88;
  --chart-5: #F2A23A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #39FF88;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #B6FF4D;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #B6FF4D;
  --radius: 0px;
}

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 TerminalBrutalistInterfaceShadcnKit() {
  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">Terminal Brutalist Interface</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": "#B6FF4D",
      "accent-foreground": "#111111",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#39FF88",
      "chart-2": "#F2A23A",
      "chart-3": "#B6FF4D",
      "chart-4": "#39FF88",
      "chart-5": "#F2A23A",
      "destructive": "#FF5A3D",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#39FF88",
      "primary-foreground": "#111111",
      "radius": "0px",
      "ring": "#B6FF4D",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#B6FF4D",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#39FF88",
      "sidebar-primary-foreground": "#111111",
      "sidebar-ring": "#B6FF4D"
    },
    "light": {
      "accent": "#B6FF4D",
      "accent-foreground": "#111111",
      "background": "#050706",
      "border": "#21442E",
      "card": "#0A0E0B",
      "card-foreground": "#D6FFE4",
      "chart-1": "#39FF88",
      "chart-2": "#F2A23A",
      "chart-3": "#B6FF4D",
      "chart-4": "#39FF88",
      "chart-5": "#F2A23A",
      "destructive": "#FF5A3D",
      "foreground": "#D6FFE4",
      "input": "#21442E",
      "muted": "#6E8A74",
      "muted-foreground": "#D6FFE4",
      "popover": "#0A0E0B",
      "popover-foreground": "#D6FFE4",
      "primary": "#39FF88",
      "primary-foreground": "#111111",
      "radius": "0px",
      "ring": "#B6FF4D",
      "secondary": "#F2A23A",
      "secondary-foreground": "#ffffff",
      "sidebar": "#0A0E0B",
      "sidebar-accent": "#55D7FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#21442E",
      "sidebar-foreground": "#D6FFE4",
      "sidebar-primary": "#39FF88",
      "sidebar-primary-foreground": "#111111",
      "sidebar-ring": "#B6FF4D"
    },
    "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-019e6c91-25cc-72d1-8d7e-a4e7bc216bab",
    "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"
      ]
    },
    "slug": "terminal-brutalist-interface",
    "source": "katagami"
  },
  "name": "terminal-brutalist-interface",
  "title": "Terminal Brutalist Interface shadcn Theme",
  "type": "registry:theme"
}

# Terminal Brutalist Interface shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate Terminal Brutalist Interface into local shadcn/ui primitives for command consoles, telemetry editors, and data operations screens. The system must feel like a square phosphor terminal, not a generic dark dashboard.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, and table.

## Token cues
Use `{colors.background}` for the page, `{colors.surface}` for cards, `{colors.primary}` for active phosphor, `{colors.secondary}` for amber command rails, `{colors.border}` for one-pixel outlines, `{typography.mono_font}` for labels and figures, `{spacing.*}` in 8px multiples, and `{rounded.none}` for almost every primitive.

## Visual character to preserve
- 8px/64px terminal grid backgrounds.
- Square panels with 1px phosphor borders and 4px amber command gutters.
- Monospace uppercase prompt labels and tabular numerals.
- CRT scanline overlays only on machine-output cards.
- Bitmap cell meters for progress, risk, and state.

## ShadSync visual profile
family: terminal-brutalist; material: off-black CRT glass; contour: square; border: phosphor-1px-with-amber-gutter; underlay: terminal-grid; grain: scanline; stickerBadges: false; motion: stepped-cell-snap; density: high; accents: phosphor-green and amber.

## Signature component recipes
- button: square, uppercase, `border border-primary`, no radius, hover translates one 4px cell with amber offset shadow; destructive uses red text with double border.
- card: surface black, one-pixel phosphor border, optional `before` amber gutter for command cards; data cards can add a scanline pseudo-element.
- input: black inset field, 1px border, phosphor focus outline with amber corner ticks; values use tabular monospace.
- textarea: same as input but with faint 8px baseline grid for command scripts.
- select: square trigger with amber chevron cell and uppercase current mode.
- dialog: hard-edged modal with 4px amber top rail, no overlay blur, terminal title prefix `> CONFIRM`.
- sheet: side register with fixed 64px grid subdivisions and dense rows.
- tabs: tab triggers look like command modes; active tab receives phosphor fill line and amber left rail.
- badge: square micro labels with one-pixel border; success green, warning amber, error red.
- separator: single phosphor line or double amber line for locked/destructive sections.
- checkbox: 16px square cell that fills phosphor and uses `X` glyph when checked.
- switch: row of discrete cells rather than a pill; active cells glow phosphor.
- slider: segmented bitmap track with square thumb snapping to 8px increments.
- tooltip: black terminal hint with amber prompt prefix and no rounded bubble.
- dropdown-menu: square command list, active item gets amber gutter and phosphor text.
- table: dense monospace rows, fixed grid columns, uppercase amber headers, badges embedded as state cells.

## Preview shots
1. application-shell: tunnel grid sentinel console with navigation register, dominant terminal map, and event log.
2. detail-editor: manual command dialog/sheet for staging a reroute with field focus and warning states.
3. data-operations: relay table with dropdown actions, segmented sliders, switches, and terminal badges.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a separate component library. Keep all radii square, use no glass blur, and ensure focus states are visible through phosphor outlines and amber gutters.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export function TerminalRelayCard() {
  return (
    <Card className="relative overflow-hidden rounded-none border border-primary/50 bg-background text-foreground shadow-[0_0_18px_rgba(57,255,136,.08)] before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-secondary">
      <CardHeader className="pl-6">
        <p className="font-mono text-[10px] uppercase tracking-widest text-secondary">&gt; relay table</p>
        <CardTitle className="font-mono uppercase tracking-[-0.06em] text-primary">Grid Sentinel / 08</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3 pl-6 font-mono">
        <Input className="rounded-none border-border bg-black/40 font-mono focus-visible:ring-2 focus-visible:ring-primary" defaultValue="reroute --safe --amber" />
        <div className="flex gap-2"><Badge className="rounded-none border border-primary bg-transparent text-primary">LIVE</Badge><Badge className="rounded-none border border-secondary bg-transparent text-secondary">AMBER HOLD</Badge></div>
        <Table><TableHeader><TableRow><TableHead>Node</TableHead><TableHead>Load</TableHead><TableHead>State</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>T18-PMP-09</TableCell><TableCell>41%</TableCell><TableCell>HOLD</TableCell></TableRow></TableBody></Table>
        <Button className="rounded-none border border-primary bg-transparent font-mono uppercase text-primary hover:translate-x-1 hover:-translate-y-1 hover:bg-transparent hover:shadow-[-4px_4px_0_#F2A23A]">Commit Route</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "card",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "input",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "textarea",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "select",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "dialog",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "sheet",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "tabs",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "badge",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "separator",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "checkbox",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "switch",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "slider",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "tooltip",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    },
    {
      "component": "table",
      "recipe": "Square terminal primitive with 1px phosphor border, no radius, monospace labels, amber gutters for active or command states, and stepped focus motion."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic KPI card row",
        "rounded dashboard panels",
        "decorative sprites"
      ],
      "composition": "Three-zone command shell: left command stack, dominant terminal map, right telemetry register, bottom event log locked to the 8px grid.",
      "id": "application-shell",
      "mustShowStates": [
        "active phosphor route",
        "amber hold badge",
        "hovered command button",
        "dead relay row"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Commit route",
          "Isolate amber zone"
        ],
        "description": "Operators reroute pump power through live phosphor nodes while amber locks protect unstable relays.",
        "eyebrow": "> municipal tunnel grid",
        "headline": "Grid Sentinel / 08",
        "rows": [
          {
            "load": "83%",
            "node": "T18-AUX-04",
            "state": "LIVE"
          },
          {
            "load": "41%",
            "node": "T18-PMP-09",
            "state": "HOLD"
          },
          {
            "load": "00%",
            "node": "T17-DRN-02",
            "state": "DEAD"
          }
        ],
        "stats": [
          {
            "label": "Continuity",
            "value": "97.4%"
          },
          {
            "label": "Latency",
            "value": "008ms"
          },
          {
            "label": "Amber locks",
            "value": "03"
          }
        ]
      }
    },
    {
      "avoid": [
        "soft modal blur",
        "pill switches",
        "large empty form spacing"
      ],
      "composition": "A hard-edged reroute editor opens over a black grid, with amber top rail, command fields, segmented safety slider, and terminal confirmation log.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input phosphor outline",
        "checked square cell",
        "switch as segmented cells",
        "warning badge"
      ],
      "primitives": [
        "dialog",
        "sheet",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "button",
        "badge",
        "separator",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Stage command",
          "Abort"
        ],
        "description": "A supervisor edits a safe reroute script and confirms which locks are allowed to release.",
        "eyebrow": "> stage manual command",
        "fields": [
          {
            "label": "Target node",
            "value": "T18-PMP-09"
          },
          {
            "label": "Operation",
            "value": "reroute --safe --amber"
          },
          {
            "label": "Supervisor note",
            "value": "Hold drain two until checksum clears."
          }
        ],
        "headline": "Reroute Pump Array T18-PMP-09",
        "stats": [
          {
            "label": "Risk",
            "value": "AMBER"
          },
          {
            "label": "Cell snap",
            "value": "8px"
          }
        ]
      }
    },
    {
      "avoid": [
        "inventory wall of components",
        "smooth continuous progress bars",
        "unstructured pixel decoration"
      ],
      "composition": "Dense relay operations table with fixed monospace columns, row actions, amber warnings, segmented throughput controls, and tabbed command modes.",
      "id": "data-operations",
      "mustShowStates": [
        "selected table row",
        "open command dropdown",
        "segmented slider",
        "active terminal tab"
      ],
      "primitives": [
        "table",
        "dropdown-menu",
        "button",
        "badge",
        "separator",
        "card",
        "slider",
        "switch",
        "tooltip",
        "tabs",
        "select"
      ],
      "scene": {
        "actions": [
          "Sync selected",
          "Export log"
        ],
        "description": "Technicians audit node load, lock state, and packet routing from a compact data-operations surface.",
        "eyebrow": "> relay operations",
        "headline": "Subnet Relay Matrix",
        "rows": [
          {
            "load": "83%",
            "node": "T18-AUX-04",
            "packets": "18,402",
            "state": "LIVE"
          },
          {
            "load": "41%",
            "node": "T18-PMP-09",
            "packets": "8,119",
            "state": "HOLD"
          },
          {
            "load": "00%",
            "node": "T17-DRN-02",
            "packets": "0",
            "state": "DEAD"
          }
        ],
        "stats": [
          {
            "label": "Mode",
            "value": "MANUAL"
          },
          {
            "label": "Checksum",
            "value": "8F4A"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "phosphor green",
      "#39FF88",
      "amber",
      "#F2A23A",
      "red fault cells"
    ],
    "border": "1px phosphor with 4px amber command gutters",
    "contour": "square",
    "density": "high operational density",
    "family": "terminal-brutalist",
    "grain": "horizontal scanline raster on output regions",
    "material": "off-black CRT terminal glass",
    "motion": "two-step cell snap",
    "stickerBadges": false,
    "underlay": "8px terminal grid plus 64px macro rails"
  }
}