Apricot Pocket Garden

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

:root {
  --background: #FFF8EF;
  --foreground: #2B211C;
  --card: #FFEFD9;
  --card-foreground: #2B211C;
  --popover: #FFEFD9;
  --popover-foreground: #2B211C;
  --primary: #0E746A;
  --primary-foreground: #ffffff;
  --secondary: #F6B98E;
  --secondary-foreground: #111111;
  --muted: #806F64;
  --muted-foreground: #2B211C;
  --accent: #F56F54;
  --accent-foreground: #ffffff;
  --destructive: #B93831;
  --border: #E8CDB8;
  --input: #E8CDB8;
  --ring: #F56F54;
  --chart-1: #0E746A;
  --chart-2: #F6B98E;
  --chart-3: #F56F54;
  --chart-4: #138A68;
  --chart-5: #B87900;
  --sidebar: #FFEFD9;
  --sidebar-foreground: #2B211C;
  --sidebar-primary: #0E746A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3867C8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E8CDB8;
  --sidebar-ring: #F56F54;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0E746A;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #F56F54;
  --accent-foreground: #ffffff;
  --destructive: #B93831;
  --border: #303642;
  --input: #303642;
  --ring: #F56F54;
  --chart-1: #0E746A;
  --chart-2: #F6B98E;
  --chart-3: #F56F54;
  --chart-4: #138A68;
  --chart-5: #B87900;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0E746A;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #F56F54;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #F56F54;
  --radius: 18px;
}

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 ApricotPocketGardenShadcnKit() {
  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">Apricot Pocket Garden</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apricot-pocket-garden",
  "type": "registry:theme",
  "title": "Apricot Pocket Garden shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFF8EF",
      "foreground": "#2B211C",
      "card": "#FFEFD9",
      "card-foreground": "#2B211C",
      "popover": "#FFEFD9",
      "popover-foreground": "#2B211C",
      "primary": "#0E746A",
      "primary-foreground": "#ffffff",
      "secondary": "#F6B98E",
      "secondary-foreground": "#111111",
      "muted": "#806F64",
      "muted-foreground": "#2B211C",
      "accent": "#F56F54",
      "accent-foreground": "#ffffff",
      "destructive": "#B93831",
      "border": "#E8CDB8",
      "input": "#E8CDB8",
      "ring": "#F56F54",
      "chart-1": "#0E746A",
      "chart-2": "#F6B98E",
      "chart-3": "#F56F54",
      "chart-4": "#138A68",
      "chart-5": "#B87900",
      "sidebar": "#FFEFD9",
      "sidebar-foreground": "#2B211C",
      "sidebar-primary": "#0E746A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3867C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E8CDB8",
      "sidebar-ring": "#F56F54",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0E746A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F56F54",
      "accent-foreground": "#ffffff",
      "destructive": "#B93831",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F56F54",
      "chart-1": "#0E746A",
      "chart-2": "#F6B98E",
      "chart-3": "#F56F54",
      "chart-4": "#138A68",
      "chart-5": "#B87900",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0E746A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F56F54",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F56F54",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ea9a3-1013-77c3-af97-dc02a739bd09",
    "slug": "apricot-pocket-garden",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

# shadcn/ui Components — Apricot Pocket Garden

Author: `katagami-agent`

This component recipe pack translates the tactile pastel language into practical shadcn/ui screens. Use local imports from `@/components/ui/*`, theme variables derived by the finalizer, and small tactile details rather than a separate component library.

## ShadSync visual profile

- Family: paper-collage consumer app
- Material: warm ivory paper ground, apricot cards, translucent peach borders, fine grain, and soft natural shadows
- Contour: rounded pebble containers (`28px`), friendly controls (`18px`), full pill badges, plus occasional clipped sticker-tab corners
- Border: 1px peach lines with low contrast; teal focus rings; never pastel-only state communication
- Underlay: slow butter, lavender, peach, and powder-blue washes behind app shells
- Motion: lift on hover, press on tap, and a small coral stamp for completion; avoid confetti overload
- Density: balanced mobile-first spacing with reusable 8px rhythm and generous blank paper

## Signature component recipes

### button
Primary buttons use `Button` with teal fill, cocoa text/icons, 18px radius, a soft translate-y lift, and optional coral stamp badge when an action completes. Secondary buttons are warm-ivory ghost buttons with peach border.

### card
Cards use `Card` on apricot paper, 28px radius, 1px translucent peach border, soft shadow, roomy padding, and tiny sticker tabs or seed-dot ornaments in non-critical corners.

### input
Inputs use warm ivory insets, cocoa labels, muted helper text, teal `focus-visible:ring`, 18px radius, and clear error/success text with icons.

### textarea
Textareas mirror inputs but feel like paper memo pads with a soft inner highlight and optional ruled-paper background line at very low opacity.

### select
Select triggers are pill-rounded ivory controls with peach border, teal focus ring, and menu content on apricot paper with cocoa text.

### dialog
Dialogs are centered paper cards with rounded 28px corners, warm overlay blur, teal primary action, and coral status stamp in the header only when meaningful.

### sheet
Sheets slide as tactile side pockets with apricot surface, peach seam border, rounded leading corners, and stacked mobile-friendly sections.

### tabs
Tabs are segmented sticker tabs on a warm ivory rail; active tab uses butter/teal contrast and a tiny offset shadow.

### badge
Badges are full-pill chips with semantic color plus icon/text; coral badges are reserved for rewards or saved states, not every label.

### separator
Separators are hairline peach seams or sparse dotted stitch lines, never harsh gray rules.

### checkbox
Checkboxes are rounded seed-square controls with teal checked state, visible check icon, and cocoa label.

### switch
Switches use a butter/peach track and teal thumb when on, with text labels for state clarity.

### slider
Sliders use peach track, teal filled range, pill thumb, and value badge for precise consumer settings.

### tooltip
Tooltips are small cocoa-on-butter paper notes with soft radius and concise helpful copy.

### dropdown-menu
Dropdown menus are compact apricot paper popovers with peach border, teal active row, and clear destructive rows in semantic error color.

### table
Tables become card-like data boards with sticky cocoa headers, alternating ivory/apricot rows, pill statuses, and mobile row cards below narrow widths.

## Preview shots

1. `application-shell` — habit dashboard with warm underlay, card grid, tabs, badges, switch, and progress slider.
2. `detail-editor` — plan editor with dialog/sheet patterns, input, textarea, select, tooltip, and semantic validation.
3. `data-operations` — saved items table with dropdown actions, checkbox selection, status badges, and calm empty/loading states.

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

export function ApricotPocketGardenPanel() {
  return (
    <Card className="rounded-[28px] border border-[var(--border)] bg-[var(--card)] shadow-[0_16px_36px_rgba(111,78,55,0.14)]">
      <CardHeader className="space-y-3">
        <Badge className="w-fit rounded-full bg-[var(--accent)] text-[var(--accent-foreground)]">Coral stamp saved</Badge>
        <CardTitle className="font-heading text-3xl text-[var(--foreground)]">Pocket garden plan</CardTitle>
        <Tabs defaultValue="today"><TabsList className="rounded-full bg-[var(--muted)]"><TabsTrigger value="today">Today</TabsTrigger><TabsTrigger value="week">Week</TabsTrigger></TabsList></Tabs>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input className="rounded-[18px] bg-[var(--background)] focus-visible:ring-[var(--ring)]" placeholder="Add a tiny ritual" />
        <Slider defaultValue={[62]} max={100} step={1} />
        <Button className="rounded-[18px] bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm transition hover:-translate-y-0.5">Plant the plan</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019ea9a3-1013-77c3-af97-dc02a739bd09",
    "name": "Apricot Pocket Garden",
    "slug": "apricot-pocket-garden"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "Layer warm ivory and apricot cards with inset grain overlays, 1px translucent peach borders, and soft lower-right butter shadows.",
    "Use rounded mobile modules with asymmetric sticker tabs, pill chips, and small clipped corner accents rather than generic rectangles.",
    "Reserve high-chroma coral and blue-green for progress knots, focus rings, and reward stamps while body surfaces stay quiet and tonal.",
    "Build paired light and dark theme panels using the same semantic ramps so contrast and hierarchy remain consistent across modes."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "pebble",
    "border": "dashed",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Apricot Pocket Garden launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Use teal or deep text for readable actions on pastel grounds and keep pastel-only text decorative, never functional.",
      "Show progress and onboarding as tactile steps, stamps, cards, and chips rather than generic progress bars alone.",
      "Pair every light-theme color cue with a dark-theme equivalent and a non-color state cue such as shape, icon, or label.",
      "Use restrained coral/yellow accents for reward moments, focus, and one primary action per screen."
    ],
    "dont": [
      "Do not place small type directly on lavender, butter, or coral without checking contrast against the semantic ramp.",
      "Do not turn every component into a novelty blob; keep controls consistently rounded and reserve sticker shapes for emphasis.",
      "Do not use confetti, neon gradients, or many saturated accents at once; the language should feel calm before it feels playful.",
      "Do not create desktop-only dashboard compositions that ignore thumb reach and mobile onboarding flow."
    ]
  }
}