Memphis Command Objects

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

:root {
  --background: #F4F1E8;
  --foreground: #080808;
  --card: #FFFFFF;
  --card-foreground: #080808;
  --popover: #FFFFFF;
  --popover-foreground: #080808;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #F7F4EA;
  --secondary-foreground: #111111;
  --muted: #6E6A61;
  --muted-foreground: #080808;
  --accent: #00C2FF;
  --accent-foreground: #ffffff;
  --destructive: #FF3B7A;
  --border: #080808;
  --input: #080808;
  --ring: #00C2FF;
  --chart-1: #050505;
  --chart-2: #F7F4EA;
  --chart-3: #00C2FF;
  --chart-4: #A7FF1A;
  --chart-5: #FFB000;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #080808;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00C2FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #080808;
  --sidebar-ring: #00C2FF;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #00C2FF;
  --accent-foreground: #ffffff;
  --destructive: #FF3B7A;
  --border: #303642;
  --input: #303642;
  --ring: #00C2FF;
  --chart-1: #050505;
  --chart-2: #F7F4EA;
  --chart-3: #00C2FF;
  --chart-4: #A7FF1A;
  --chart-5: #FFB000;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #00C2FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #00C2FF;
  --radius: 2px;
}

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 MemphisCommandObjectsShadcnKit() {
  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">Memphis Command Objects</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": "#00C2FF",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#050505",
      "chart-2": "#F7F4EA",
      "chart-3": "#00C2FF",
      "chart-4": "#A7FF1A",
      "chart-5": "#FFB000",
      "destructive": "#FF3B7A",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00C2FF",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00C2FF"
    },
    "light": {
      "accent": "#00C2FF",
      "accent-foreground": "#ffffff",
      "background": "#F4F1E8",
      "border": "#080808",
      "card": "#FFFFFF",
      "card-foreground": "#080808",
      "chart-1": "#050505",
      "chart-2": "#F7F4EA",
      "chart-3": "#00C2FF",
      "chart-4": "#A7FF1A",
      "chart-5": "#FFB000",
      "destructive": "#FF3B7A",
      "foreground": "#080808",
      "input": "#080808",
      "muted": "#6E6A61",
      "muted-foreground": "#080808",
      "popover": "#FFFFFF",
      "popover-foreground": "#080808",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#00C2FF",
      "secondary": "#F7F4EA",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#080808",
      "sidebar-foreground": "#080808",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#00C2FF"
    },
    "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-019e8a06-d615-7993-bd65-2e36bdf212aa",
    "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": "memphis-command-objects",
    "source": "katagami"
  },
  "name": "memphis-command-objects",
  "title": "Memphis Command Objects shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Memphis Command Objects

Author: `katagami-agent`

## ShadSync visual profile
Family: postmodern command-board. Material: matte paper laminate with bounded terrazzo inserts. Contour: square command objects with 0-2px corners for controls/cards and rare full pills only for metadata chips. Border: 2px hard black technical outlines with occasional 4px colored edge chips. Underlay: ruled grid paper and sparse dot clusters. Grain: CSS radial-gradient terrazzo clipped to corners, never full-screen confetti. Motion: quick mechanical press/offset-shadow snap. Density: medium-high with generous gutters and grouped evidence zones. Accents: cyan, magenta, acid green, and amber reserved for state chips.

## Signature component recipes
### `button`
Use Button as a 2px black bordered rectangular command key. Add a leading 10px square chip for variant/state, use bg-primary text-background for primary, and translate active state by 3px to collapse the offset shadow.

### `card`
Use Card as chunky command object: border-2 border-black, rounded-[2px], bg-white, shadow-[6px_6px_0_#080808], with a clipped terrazzo corner panel and object-number plaque.

### `input`
Use Input with bg-white, border-2 border-black, rounded-[2px], mono uppercase label, focus-visible ring-0 and a cyan left chip or outline rail.

### `textarea`
Use Textarea as an evidence panel: fixed square contour, black outline, subtle ruled-grid background, compact mono helper text, and no soft resize handles in hero layouts.

### `select`
Use SelectTrigger as a command selector with black border, square chip on the right edge, uppercase mono selected metadata, and white content panel with manga divider rows.

### `dialog`
Use DialogContent as a centered object card with hard offset shadow, a numbered tab, bounded terrazzo header insert, and high-contrast action bar.

### `sheet`
Use SheetContent as a slide-in command drawer with black rail border, object inventory rows, accent chips for sections, and no translucent glass overlay styling.

### `tabs`
Use TabsList as a bordered rail. TabsTrigger items are square plaques; active tabs get cyan or amber chip fill and a 2px black underline cap.

### `badge`
Use Badge for small object IDs and status chips only. Prefer square or tiny-radius badges with mono uppercase labels, not soft pill clouds.

### `separator`
Use Separator as a manga panel divider: 2px black horizontal/vertical rules, sometimes doubled with 8px spacing for command/evidence splits.

### `checkbox`
Use Checkbox with square black contour and acid-green check fill; place beside compact command labels in review queues.

### `switch`
Use Switch sparingly as a rectangular toggle with black track, square thumb, and small state chip; do not use iOS-style soft gloss.

### `slider`
Use Slider as a calibration rail with black track, square thumb, numeric mono ticks, and small accent blocks at thresholds.

### `tooltip`
Use TooltipContent as a small decorated-shed plaque: white, black border, mono uppercase title, one accent chip, and hard offset micro shadow.

### `dropdown-menu`
Use DropdownMenuContent as a command menu with white laminate background, black borders, row dividers, object IDs, and accent chips for destructive or priority actions.

### `table`
Use Table for operations data with heavy header rule, black row caps, numeric object badges, and grouped evidence/output columns rather than generic SaaS zebra striping.

## Preview shots
- `application-shell`: agent run queue command board with hero object cards, status rail, and terminal evidence.
- `detail-editor`: manga asset review/editor with fields, tabs, dialog/sheet affordances, and bounded terrazzo material.
- `data-operations`: command inventory table with filters, dropdown menu, slider calibration, switches, and row caps.

## 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"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function MemphisCommandObject() {
  return (
    <Card className="relative rounded-[2px] border-2 border-black bg-white shadow-[6px_6px_0_#080808] overflow-hidden">
      <div className="absolute right-0 top-0 h-16 w-24 border-b-2 border-l-2 border-black bg-[radial-gradient(circle_at_8px_8px,#00C2FF_0_3px,transparent_4px),radial-gradient(circle_at_28px_18px,#FF3B7A_0_3px,transparent_4px)]" />
      <CardHeader className="border-b-2 border-black pr-28">
        <Badge className="w-fit rounded-[2px] border-2 border-black bg-[#A7FF1A] font-mono text-black">OBJ-07</Badge>
        <CardTitle className="font-black uppercase tracking-tight">Command Review Queue</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-4">
        <Input className="rounded-[2px] border-2 border-black bg-white font-mono uppercase" placeholder="TRACE FILTER" />
        <Tabs defaultValue="runs"><TabsList className="rounded-none border-2 border-black bg-white"><TabsTrigger value="runs">Runs</TabsTrigger></TabsList></Tabs>
        <Button className="rounded-[2px] border-2 border-black bg-black text-white shadow-[3px_3px_0_#080808]">Execute command</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Rectangular command key using Button with border-2 border-black rounded-[2px], hard 3px offset shadow, leading 10px square state chip, primary black fill, and active translate-x/y to collapse the shadow."
    },
    {
      "primitive": "card",
      "recipe": "Card is a chunky white laminate object with border-2 border-black rounded-[2px], shadow-[6px_6px_0_#080808], an object-number tab, and one clipped terrazzo radial-gradient corner insert."
    },
    {
      "primitive": "input",
      "recipe": "Input uses white fill, black 2px outline, square focus rail or cyan left chip, uppercase mono label, no browser bevel, and compact validation badge."
    },
    {
      "primitive": "textarea",
      "recipe": "Textarea is an evidence panel with square contour, ruled-grid background, black outline, mono helper text, and controlled resize only outside hero scenes."
    },
    {
      "primitive": "select",
      "recipe": "SelectTrigger is a bordered command selector with right-edge colored chip, uppercase mono value, and white menu content with manga divider rows."
    },
    {
      "primitive": "dialog",
      "recipe": "DialogContent becomes a centered object card with numbered plaque, bounded terrazzo header, hard black offset shadow, and high-contrast command footer."
    },
    {
      "primitive": "sheet",
      "recipe": "SheetContent is a slide-in command drawer with black rail border, inventory rows, section chips, and opaque laminate surface rather than glass."
    },
    {
      "primitive": "tabs",
      "recipe": "TabsList is a bordered rail; TabsTrigger items are square plaques, active state gets cyan/amber chip fill and a heavy black underline cap."
    },
    {
      "primitive": "badge",
      "recipe": "Badge is reserved for small object IDs, statuses, and priority chips; use square/2px radius mono uppercase labels instead of soft pill clouds."
    },
    {
      "primitive": "separator",
      "recipe": "Separator draws manga panel dividers: 2px black rules, occasional doubled rules, and strong command/evidence splits."
    },
    {
      "primitive": "checkbox",
      "recipe": "Checkbox keeps a square black contour with acid-green checked fill beside compact review-queue labels."
    },
    {
      "primitive": "switch",
      "recipe": "Switch is a rectangular black-track toggle with square thumb and small state chip, avoiding iOS gloss or soft pill styling."
    },
    {
      "primitive": "slider",
      "recipe": "Slider is a calibration rail with black track, square thumb, mono numeric ticks, and colored threshold blocks."
    },
    {
      "primitive": "tooltip",
      "recipe": "TooltipContent is a small decorated-shed plaque: white, black border, mono uppercase title, one accent chip, and hard micro shadow."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "DropdownMenuContent is a command menu with white laminate background, black borders, row dividers, object IDs, and accent chips for destructive/priority actions."
    },
    {
      "primitive": "table",
      "recipe": "Table uses heavy header rules, black row caps, numeric object badges, grouped evidence/output columns, and no generic SaaS zebra striping."
    }
  ],
  "generatedBy": "katagami-agent",
  "language": {
    "id": "en-019e8a06-d615-7993-bd65-2e36bdf212aa",
    "name": "Memphis Command Objects",
    "slug": "memphis-command-objects"
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "scene": {
        "actions": [
          "Dispatch run",
          "Open evidence",
          "Hold queue"
        ],
        "description": "A twelve-column operations shell with rail navigation, chunky run cards, a terminal evidence slab, and small Memphis chips marking priority and state.",
        "eyebrow": "QUEUE / OBJ-01",
        "fields": [
          {
            "label": "Filter command",
            "value": "asset:review status:live"
          },
          {
            "label": "Queue mode",
            "value": "Manga evidence"
          }
        ],
        "headline": "Agent run command board",
        "rows": [
          {
            "id": "OBJ-014",
            "name": "Panel crop verifier",
            "priority": "amber",
            "state": "ready"
          },
          {
            "id": "OBJ-027",
            "name": "Trace reconciler",
            "priority": "cyan",
            "state": "running"
          },
          {
            "id": "OBJ-031",
            "name": "Export gate",
            "priority": "magenta",
            "state": "blocked"
          }
        ],
        "stats": [
          {
            "label": "Active objects",
            "tone": "cyan",
            "value": "18"
          },
          {
            "label": "Clean proofs",
            "tone": "green",
            "value": "94%"
          },
          {
            "label": "Blocked",
            "tone": "magenta",
            "value": "03"
          }
        ]
      },
      "title": "Application shell",
      "viewport": "desktop"
    },
    {
      "id": "detail-editor",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "dialog",
        "sheet",
        "tabs",
        "badge",
        "checkbox",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Approve object",
          "Request repair",
          "View sheet"
        ],
        "description": "A focused editor with square technical fields, tabs as command plaques, a side sheet of evidence, and dialog confirmation styled as a bordered laminate object.",
        "eyebrow": "EDITOR / OBJ-22",
        "fields": [
          {
            "label": "Asset title",
            "value": "Chapter 04 impact frame"
          },
          {
            "label": "Review note",
            "value": "Keep dot cluster bounded to the corner insert."
          },
          {
            "label": "Output tag",
            "value": "OBJ-22 / READY"
          }
        ],
        "headline": "Manga asset review object",
        "rows": [
          {
            "id": "CHK-1",
            "name": "Grid anchor preserved",
            "priority": "green",
            "state": "checked"
          },
          {
            "id": "CHK-2",
            "name": "Color used only as chips",
            "priority": "cyan",
            "state": "checked"
          },
          {
            "id": "CHK-3",
            "name": "No confetti wallpaper",
            "priority": "amber",
            "state": "checked"
          }
        ],
        "stats": [
          {
            "label": "Focus chips",
            "tone": "cyan",
            "value": "06"
          },
          {
            "label": "Annotations",
            "tone": "amber",
            "value": "12"
          },
          {
            "label": "Pass state",
            "tone": "green",
            "value": "OK"
          }
        ]
      },
      "title": "Detail editor",
      "viewport": "desktop"
    },
    {
      "id": "data-operations",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "badge",
        "separator",
        "checkbox",
        "switch",
        "slider",
        "dropdown-menu",
        "table",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Export manifest",
          "Calibrate rail",
          "Open command menu"
        ],
        "description": "A dense but legible operations table with manga-panel dividers, numeric object badges, calibration slider rails, rectangular switches, and command dropdown menus.",
        "eyebrow": "DATA OPS / OBJ-44",
        "fields": [
          {
            "label": "Search objects",
            "value": "status:reviewed chip:amber"
          },
          {
            "label": "Calibration rail",
            "value": "76 / 100"
          }
        ],
        "headline": "Command inventory table",
        "rows": [
          {
            "id": "OBJ-101",
            "name": "Thumbnail verifier",
            "priority": "green",
            "state": "synced"
          },
          {
            "id": "OBJ-117",
            "name": "Registry theme derivation",
            "priority": "cyan",
            "state": "queued"
          },
          {
            "id": "OBJ-132",
            "name": "Blocked lint warning",
            "priority": "magenta",
            "state": "repair"
          }
        ],
        "stats": [
          {
            "label": "Rows grouped",
            "tone": "cyan",
            "value": "128"
          },
          {
            "label": "Threshold",
            "tone": "amber",
            "value": "76"
          },
          {
            "label": "Synced",
            "tone": "green",
            "value": "YES"
          }
        ]
      },
      "title": "Data operations",
      "viewport": "desktop"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "#00C2FF cyan chips",
      "#FF3B7A magenta warning plaques",
      "#A7FF1A acid green success marks",
      "#FFB000 amber priority tabs"
    ],
    "border": "2px hard black technical outlines with occasional 4px cyan/magenta/acid-green/amber edge chips",
    "contour": "square command objects; 0-2px controls/cards, rare pills only for metadata badges",
    "density": "medium-high grouped into chunky evidence and command zones with generous gutters",
    "family": "postmodern command-board",
    "grain": "CSS radial-gradient terrazzo clipped inside corner panels; never full-screen confetti",
    "material": "matte paper laminate with bounded terrazzo inserts",
    "motion": "quick mechanical press/offset-shadow snap in about 140ms",
    "stickerBadges": true,
    "underlay": "faint ruled-grid paper with sparse black dot clusters and visible alignment rails"
  }
}