Swiss Punk Manga Interface Collage

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

:root {
  --background: #F7F1E4;
  --foreground: #111111;
  --card: #FFFBEF;
  --card-foreground: #111111;
  --popover: #FFFBEF;
  --popover-foreground: #111111;
  --primary: #0B0B0C;
  --primary-foreground: #ffffff;
  --secondary: #F3EFE4;
  --secondary-foreground: #111111;
  --muted: #6B665E;
  --muted-foreground: #3B3732;
  --accent: #FF4FD8;
  --accent-foreground: #ffffff;
  --destructive: #C5162E;
  --border: #111111;
  --input: #111111;
  --ring: #FF4FD8;
  --chart-1: #0B0B0C;
  --chart-2: #F3EFE4;
  --chart-3: #FF4FD8;
  --chart-4: #1B7A3D;
  --chart-5: #B77900;
  --sidebar: #FFFBEF;
  --sidebar-foreground: #111111;
  --sidebar-primary: #0B0B0C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2455A6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #111111;
  --sidebar-ring: #FF4FD8;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0B0B0C;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FF4FD8;
  --accent-foreground: #ffffff;
  --destructive: #C5162E;
  --border: #303642;
  --input: #303642;
  --ring: #FF4FD8;
  --chart-1: #0B0B0C;
  --chart-2: #F3EFE4;
  --chart-3: #FF4FD8;
  --chart-4: #1B7A3D;
  --chart-5: #B77900;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0B0B0C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FF4FD8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #FF4FD8;
  --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 SwissPunkMangaInterfaceCollageShadcnKit() {
  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">Swiss Punk Manga Interface Collage</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": "#FF4FD8",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#0B0B0C",
      "chart-2": "#F3EFE4",
      "chart-3": "#FF4FD8",
      "chart-4": "#1B7A3D",
      "chart-5": "#B77900",
      "destructive": "#C5162E",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF4FD8",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#FF4FD8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF4FD8"
    },
    "light": {
      "accent": "#FF4FD8",
      "accent-foreground": "#ffffff",
      "background": "#F7F1E4",
      "border": "#111111",
      "card": "#FFFBEF",
      "card-foreground": "#111111",
      "chart-1": "#0B0B0C",
      "chart-2": "#F3EFE4",
      "chart-3": "#FF4FD8",
      "chart-4": "#1B7A3D",
      "chart-5": "#B77900",
      "destructive": "#C5162E",
      "foreground": "#111111",
      "input": "#111111",
      "muted": "#6B665E",
      "muted-foreground": "#3B3732",
      "popover": "#FFFBEF",
      "popover-foreground": "#111111",
      "primary": "#0B0B0C",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#FF4FD8",
      "secondary": "#F3EFE4",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFBEF",
      "sidebar-accent": "#2455A6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#111111",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#0B0B0C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#FF4FD8"
    },
    "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-019e8a02-9f24-7760-9df1-834d8e74b2a6",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "accent_foreground",
        "background",
        "border",
        "card",
        "card_foreground",
        "destructive",
        "error",
        "foreground",
        "info",
        "input",
        "muted",
        "muted_foreground",
        "popover",
        "popover_foreground",
        "primary",
        "primary_foreground",
        "ring",
        "secondary",
        "secondary_foreground",
        "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": "swiss-punk-manga-interface-collage",
    "source": "katagami"
  },
  "name": "swiss-punk-manga-interface-collage",
  "title": "Swiss Punk Manga Interface Collage shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Swiss Punk Manga Interface Collage

Author: `katagami-agent`

## ShadSync visual profile

- **Family:** paper-collage product interface combining Swiss Punk anti-grid composition with manga production-board pacing.
- **Material:** off-white paper, black ink overprint, radial halftone fields, torn caption strips, and compact terminal annotation.
- **Contour:** clipped rectangular panels; containers/cards use 2px radius, controls use 0-2px radius, and only small status pills may use full radius.
- **Border:** 2px black ink borders, dashed crop marks for metadata, and hard 3px/6px registration shadows instead of blur.
- **Underlay:** low-opacity halftone dots, manga gutter rules, terminal scanline bands, and black overprint bars behind display headings.
- **Grain:** paper-dot texture and overprinted ink; never glass, chrome, neon glow, or soft gradient.
- **Sticker badges:** exactly one disruptive #FF4FD8 accent patch per screen for active state, focus, or quotation marker.
- **Motion:** 140ms stepped frame-advance movement with tiny lift/rotate; no floaty easing.
- **Density:** medium-high telemetry in strict internal columns balanced by wide off-white manga gutters.

Use generated theme variables from `/shadcn.json`, import local primitives from `@/components/ui/*`, and apply these recipes instead of inventing a second component system. Pair any decorative skew with stable readable form, table, and action alignment.

## Signature component recipes

### button
Use squared buttons with `border-2 border-foreground`, `rounded-[2px]`, `font-mono uppercase tracking-[0.12em]`, and `shadow-[3px_3px_0_#111111]`. Primary buttons are black ink blocks with off-white text. The single active accent button may use `bg-[#FF4FD8] text-[#111111]`. Focus is a hard magenta outline plus offset, never glow.

### card
Cards are hard-edged paper panels: `bg-card`, `border-2 border-foreground`, `rounded-[2px]`, offset registration shadow, clipped corner eyebrow, and optional radial halftone underlay. Inner content aligns to strict columns even when the panel is stair-stepped or slightly rotated.

### input
Inputs are sober terminal instruments: square paper fields, 2px black border, mono labels above, black caret, magenta focus ring, and inline validation in small caption strips. Never skew typed content.

### textarea
Textareas share the input frame with denser line-height, a terminal prompt label, black caption tab for state, and visible resize affordance. Use for prompt/spec editors with readable monospace code-like content.

### select
Select triggers are compact terminal controls with hard border, paper fill, uppercase mono value, black chevron, and magenta only on open/focus. Dropdown content uses paper panels and dashed separator crop marks.

### dialog
Dialogs are poster panels over a flat halftone scrim. Use black overprint title bars, paper body, squared action row, and one accent confirmation/status badge. Avoid centered SaaS softness.

### sheet
Sheets enter as manga sidecars: left/right panels with vertical gutter labels, 2px ink border, no blur shadow, compact telemetry sections, and squared ink-stamp close buttons.

### tabs
Tabs are caption strips. Active tab becomes the single accent patch or black overprint block; inactive tabs are outlined paper labels. Tab content remains a stable grid.

### badge
Badges are clipped caption stickers with mono uppercase text, 2px ink outline, and tiny notched corner. Reserve filled magenta for one badge per scene; other badges are paper, black, or muted ink.

### separator
Separators are manga gutters: 2px solid black for structure or dashed crop marks for metadata. Vertical separators may carry rotated frame labels.

### checkbox
Checkboxes are square ink stamps with black check glyphs, 2px border, and magenta focus outline. Labels stay readable and unrotated.

### switch
Switches are rectangular toggle rails, not pill defaults: black outlined track, square thumb, stepped transition. On state may use the single magenta accent only if no other accent is active.

### slider
Sliders use a black rule track with squared thumb, visible ticks, and small mono metadata. Active range may be magenta; hover/focus lifts by offset shadow rather than glow.

### tooltip
Tooltips are torn-caption strips with paper fill, 2px black border, mono microcopy, and no fade blur. Position them like editorial annotations connected to controls.

### dropdown-menu
Menus are compact paper panels with hard ink borders, dashed group separators, mono shortcuts, and black or magenta active item. Avoid rounded floating glass.

### table
Tables are dense telemetry ledgers: mono headers, 2px outer border, black row rules, paper cells, active row as overprint or one accent strip, and rotated gutter labels for frame numbers. Numeric columns align tightly.

## Preview shots

1. `application-shell` — agent operations spread with rail, summary cards, action buttons, filters, and a dense run table.
2. `detail-editor` — prompt/spec editor with tabs, textarea, select controls, validation captions, dialog/sheet affordances.
3. `data-operations` — batch telemetry table with sliders, switches, dropdown actions, tooltip annotations, and checkbox selection.

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

export function MangaOpsPanel() {
  return (
    <Card className="relative overflow-hidden rounded-[2px] border-2 border-[#111111] bg-[#FFFBEF] shadow-[6px_6px_0_#111111] before:absolute before:inset-0 before:bg-[radial-gradient(#111111_1px,transparent_1px)] before:bg-[length:10px_10px] before:opacity-[0.06]">
      <CardHeader className="relative border-b-2 border-[#111111] bg-[#F7F1E4]">
        <Badge className="w-fit rounded-[1px] border-2 border-[#111111] bg-[#FF4FD8] font-mono text-[#111111] shadow-[3px_3px_0_#111111]">FRAME 07</Badge>
        <CardTitle className="font-black uppercase tracking-[-0.04em] text-[#111111]">Patch Queue Collision</CardTitle>
      </CardHeader>
      <CardContent className="relative grid gap-4 p-5">
        <Tabs defaultValue="trace">
          <TabsList className="rounded-none border-2 border-[#111111] bg-[#F7F1E4]">
            <TabsTrigger value="trace" className="rounded-none font-mono uppercase data-[state=active]:bg-[#111111] data-[state=active]:text-[#F7F1E4]">Trace</TabsTrigger>
            <TabsTrigger value="diff" className="rounded-none font-mono uppercase">Diff</TabsTrigger>
          </TabsList>
          <TabsContent value="trace" className="mt-4 grid gap-3">
            <Input className="rounded-[2px] border-2 border-[#111111] bg-[#FFFBEF] font-mono focus-visible:ring-[#FF4FD8]" defaultValue="agent.render.inspect" />
            <Button className="rounded-[2px] border-2 border-[#111111] bg-[#111111] font-mono uppercase tracking-[0.12em] text-[#F7F1E4] shadow-[3px_3px_0_#111111]">Advance Frame</Button>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Render button as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "card",
      "recipe": "Render card as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "input",
      "recipe": "Render input as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "textarea",
      "recipe": "Render textarea as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "select",
      "recipe": "Render select as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "dialog",
      "recipe": "Render dialog as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "sheet",
      "recipe": "Render sheet as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "tabs",
      "recipe": "Render tabs as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "badge",
      "recipe": "Render badge as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "separator",
      "recipe": "Render separator as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "checkbox",
      "recipe": "Render checkbox as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "switch",
      "recipe": "Render switch as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "slider",
      "recipe": "Render slider as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "tooltip",
      "recipe": "Render tooltip as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Render dropdown-menu as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    },
    {
      "primitive": "table",
      "recipe": "Render table as Swiss Punk manga UI: hard black border, paper fill, squared contour, mono captions, and disciplined single magenta accent where state needs emphasis."
    }
  ],
  "generatedBy": "katagami-agent",
  "language": {
    "id": "en-019e8a02-9f24-7760-9df1-834d8e74b2a6",
    "name": "Swiss Punk Manga Interface Collage",
    "slug": "swiss-punk-manga-interface-collage"
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "components": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table",
        "tooltip"
      ],
      "id": "application-shell",
      "scene": {
        "actions": [
          "Advance frame",
          "Open trace sheet"
        ],
        "description": "A route inspection dashboard where a strict telemetry table sits inside offset paper panels, with one magenta active rail and black overprint headings.",
        "eyebrow": "FRAME 01 / ROUTE INSPECTOR",
        "fields": [
          {
            "label": "Filter command",
            "value": "agent.render.inspect"
          },
          {
            "label": "Active model",
            "value": "katagami-collage-04"
          }
        ],
        "headline": "Swiss Punk run console with manga gutters",
        "rows": [
          {
            "id": "FR-001",
            "latency": "82ms",
            "route": "/studio/panels",
            "state": "patched"
          },
          {
            "id": "FR-002",
            "latency": "119ms",
            "route": "/api/traces",
            "state": "review"
          },
          {
            "id": "FR-003",
            "latency": "—",
            "route": "/publish/assets",
            "state": "blocked"
          }
        ],
        "stats": [
          {
            "label": "queued patches",
            "value": "18"
          },
          {
            "label": "lint frames",
            "value": "07"
          },
          {
            "label": "risk overprint",
            "value": "low"
          }
        ]
      },
      "title": "Agent operations anti-grid shell"
    },
    {
      "components": [
        "textarea",
        "select",
        "dialog",
        "sheet",
        "tabs",
        "badge",
        "separator",
        "checkbox",
        "switch",
        "button"
      ],
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Commit caption",
          "Preview dialog"
        ],
        "description": "A prompt editor uses sheared heading slabs and rotated gutter labels while form fields remain crisp, rectangular, and keyboard-readable.",
        "eyebrow": "FRAME 07 / SPEC EDITOR",
        "fields": [
          {
            "label": "Scene prompt",
            "value": "halftone board with terminal sidecar"
          },
          {
            "label": "Review mode",
            "value": "strict artifact gate"
          },
          {
            "label": "Safety switch",
            "value": "animations stepped"
          }
        ],
        "headline": "Controlled illegibility around readable controls",
        "rows": [
          {
            "id": "DO",
            "rule": "Keep inputs sober and aligned",
            "status": "active"
          },
          {
            "id": "DONT",
            "rule": "No neon cyberpunk glow",
            "status": "locked"
          }
        ],
        "stats": [
          {
            "label": "tokens repaired",
            "value": "12"
          },
          {
            "label": "warnings",
            "value": "0"
          },
          {
            "label": "accent patches",
            "value": "1"
          }
        ]
      },
      "title": "Prompt/spec editor poster panel"
    },
    {
      "components": [
        "table",
        "slider",
        "switch",
        "dropdown-menu",
        "tooltip",
        "checkbox",
        "badge",
        "separator",
        "card",
        "button"
      ],
      "id": "data-operations",
      "scene": {
        "actions": [
          "Apply batch",
          "Export ledger"
        ],
        "description": "A batch operations table uses mono ledgers, manga gutters, square selections, and offset paper cards to show production-grade density.",
        "eyebrow": "FRAME 12 / DATA OPS",
        "fields": [
          {
            "label": "Threshold slider",
            "value": "0.72"
          },
          {
            "label": "Auto-publish switch",
            "value": "off"
          }
        ],
        "headline": "Dense ledger with overprint row states",
        "rows": [
          {
            "id": "B-204",
            "name": "thumbnail verify",
            "owner": "finalizer",
            "state": "pass"
          },
          {
            "id": "B-205",
            "name": "shadcn shots",
            "owner": "agent",
            "state": "ready"
          },
          {
            "id": "B-206",
            "name": "public asset attach",
            "owner": "pipeline",
            "state": "waiting"
          }
        ],
        "stats": [
          {
            "label": "selected rows",
            "value": "6"
          },
          {
            "label": "confidence",
            "value": "94%"
          },
          {
            "label": "frame step",
            "value": "140ms"
          }
        ]
      },
      "title": "Batch telemetry ledger"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "#FF4FD8 single accent patch",
      "#111111 ink blocks",
      "#F7F1E4 manga paper"
    ],
    "border": "2px solid ink with dashed crop marks and hard offset registration shadows",
    "contour": "clipped-rectangular panels with squared controls and rare pill badges",
    "density": "medium-high",
    "family": "paper-collage",
    "grain": true,
    "material": "off-white paper, black ink, halftone overprint, terminal caption strips",
    "motion": "stepped-frame-advance",
    "stickerBadges": true,
    "underlay": true
  }
}