Luma Current 2026

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

:root {
  --background: #F8F6EF;
  --foreground: #171A1F;
  --card: #FFFFFF;
  --card-foreground: #171A1F;
  --popover: #FFFFFF;
  --popover-foreground: #171A1F;
  --primary: #0F8F93;
  --primary-foreground: #ffffff;
  --secondary: #B7A7F2;
  --secondary-foreground: #ffffff;
  --muted: #8D9798;
  --muted-foreground: #171A1F;
  --accent: #176BFF;
  --accent-foreground: #ffffff;
  --destructive: #B94B58;
  --border: #D7D9D4;
  --input: #D7D9D4;
  --ring: #176BFF;
  --chart-1: #0F8F93;
  --chart-2: #B7A7F2;
  --chart-3: #176BFF;
  --chart-4: #4F8D67;
  --chart-5: #E8C75D;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #171A1F;
  --sidebar-primary: #0F8F93;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #7FC8D6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #D7D9D4;
  --sidebar-ring: #176BFF;
  --radius: 18px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #0F8F93;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #176BFF;
  --accent-foreground: #ffffff;
  --destructive: #B94B58;
  --border: #303642;
  --input: #303642;
  --ring: #176BFF;
  --chart-1: #0F8F93;
  --chart-2: #B7A7F2;
  --chart-3: #176BFF;
  --chart-4: #4F8D67;
  --chart-5: #E8C75D;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #0F8F93;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #176BFF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #176BFF;
  --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 LumaCurrent2026ShadcnKit() {
  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">Luma Current 2026</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": "luma-current-2026",
  "type": "registry:theme",
  "title": "Luma Current 2026 shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8F6EF",
      "foreground": "#171A1F",
      "card": "#FFFFFF",
      "card-foreground": "#171A1F",
      "popover": "#FFFFFF",
      "popover-foreground": "#171A1F",
      "primary": "#0F8F93",
      "primary-foreground": "#ffffff",
      "secondary": "#B7A7F2",
      "secondary-foreground": "#ffffff",
      "muted": "#8D9798",
      "muted-foreground": "#171A1F",
      "accent": "#176BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#B94B58",
      "border": "#D7D9D4",
      "input": "#D7D9D4",
      "ring": "#176BFF",
      "chart-1": "#0F8F93",
      "chart-2": "#B7A7F2",
      "chart-3": "#176BFF",
      "chart-4": "#4F8D67",
      "chart-5": "#E8C75D",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#171A1F",
      "sidebar-primary": "#0F8F93",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7FC8D6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D7D9D4",
      "sidebar-ring": "#176BFF",
      "radius": "18px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0F8F93",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#176BFF",
      "accent-foreground": "#ffffff",
      "destructive": "#B94B58",
      "border": "#303642",
      "input": "#303642",
      "ring": "#176BFF",
      "chart-1": "#0F8F93",
      "chart-2": "#B7A7F2",
      "chart-3": "#176BFF",
      "chart-4": "#4F8D67",
      "chart-5": "#E8C75D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0F8F93",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#176BFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#176BFF",
      "radius": "18px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019eb43e-791e-7e22-978e-faeba7f8d99e",
    "slug": "luma-current-2026",
    "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"
      ]
    }
  }
}

# Luma Current 2026 shadcn/ui Components
Author: `katagami-agent`

## Intent
Translate the Luma Current 2026 language into shadcn/ui primitives for color-forecasting, product configuration, material libraries, fashion line planning, and brand-system tools. Preserve the teal/lavender luminous base, precise electric-blue signal edges, chalk-oat surfaces, soft silver seams, and warm material chips.

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

## Token cues
Primary teal is the main system color; digital lavender is the secondary atmosphere; electric blue is reserved for selected states, edge rules, focus rings, and one key action. Backgrounds stay chalk/oat. Text is graphite. Borders use soft silver. Warning uses butter yellow, success uses mineral green, and destructive uses muted coral.

## Visual character to preserve
- Clipped teal-to-lavender gradient fins inside cards or sheets.
- Short electric-blue edge segments on active controls rather than full neon glow.
- Material forecast chips with color dots and mono labels.
- Matte chalk surfaces with silver borders, restrained shadows, and graphite hierarchy.

## ShadSync visual profile
family: soft-futurism; material: matte-mineral; contour: rounded-editorial; border: silver-hairline-with-signal-edge; underlay: luminous-teal-lavender-radials; grain: subtle; stickerBadges: true; motion: quiet-lift; density: balanced; accents: electric-blue-sparse, butter-yellow-warmth, muted-coral-humanity.

## Signature component recipes
- button: primary uses graphite fill with an inset 2px electric-blue top edge; secondary uses chalk fill and silver border; ghost buttons should not introduce new color.
- card: rounded 32px container, soft silver border, subtle teal shadow, optional clipped gradient fin on one side.
- input: chalk field, 18px radius, silver border, graphite text, electric-blue 2px focus ring and no default browser outline.
- textarea: same as input with generous line-height and a small mono character-count badge.
- select: chalk field with graphite label and blue signal edge when open or selected.
- dialog: large rounded card on desaturated teal/lavender underlay, silver border, graphite title, focused blue action.
- sheet: side panel with a clipped lavender/teal fin at the top and material chips in the footer.
- tabs: active tab receives a short electric-blue top border and a lavender wash, not a saturated fill.
- badge: pill form with oat background, silver border, mono label, optional warm color dot.
- separator: one-pixel soft silver rule; use extra whitespace rather than heavy dividers.
- checkbox: rounded 6px square, teal checked fill, blue focus halo.
- switch: oat track, teal thumb when on, silver track when off, no neon bloom.
- slider: silver track, teal progress, small blue handle only when focused.
- tooltip: graphite text on chalk card with silver border and tiny lavender underlay.
- dropdown-menu: chalk menu, 18px radius, silver border, selected item uses blue left edge segment.
- table: spacious rows, oat header, silver row rules, status cells use mono labels and small color dots.

## Preview shots
application-shell shows the full palette-planning workspace; detail-editor shows a material recipe dialog and controls; data-operations shows seasonal story rows and batch actions.

## Implementation contract
Import from `@/components/ui/*`; do not invent parallel primitives. Keep electric blue under 10 percent of the viewport, keep body text on chalk/oat surfaces, and use the language tokens for every state.

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

export function LumaPaletteCard() {
  return (
    <Card className="relative overflow-hidden rounded-[32px] border border-border bg-card shadow-md">
      <div className="absolute right-0 top-0 h-full w-28 bg-gradient-to-b from-primary/80 to-secondary/70" />
      <CardHeader className="relative">
        <Badge className="rounded-full border border-border bg-background text-foreground">2026 signal</Badge>
        <CardTitle className="text-3xl tracking-[-0.05em]">Transformative teal line board</CardTitle>
      </CardHeader>
      <CardContent className="relative space-y-4">
        <Input placeholder="Material family" className="rounded-[18px] focus-visible:ring-2 focus-visible:ring-[#176BFF]" />
        <Tabs defaultValue="soft-futurism">
          <TabsList className="rounded-full bg-background">
            <TabsTrigger value="soft-futurism" className="data-[state=active]:shadow-[inset_0_2px_0_#176BFF]">Soft Futurism</TabsTrigger>
          </TabsList>
          <TabsContent value="soft-futurism">Teal, digital lavender, silver, oat, and graphite.</TabsContent>
        </Tabs>
        <Button className="rounded-full bg-foreground text-background shadow-[inset_0_3px_0_#176BFF]">Generate palette</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "primitive": "button",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "card",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "input",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "textarea",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "select",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "dialog",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "sheet",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "tabs",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "badge",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "separator",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "checkbox",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "switch",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "slider",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "tooltip",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "dropdown-menu",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    },
    {
      "primitive": "table",
      "recipe": "Use Luma Current rounded geometry, chalk/oat surface, soft silver border, graphite type, and restrained electric-blue focus or selected signal."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "rainbow ordering",
        "neon glow",
        "generic analytics widgets"
      ],
      "composition": "Two-column palette forecasting shell with hero color board, signal metrics, material chips, and seasonal table.",
      "id": "application-shell",
      "mustShowStates": [
        "active tab with blue top edge",
        "primary graphite button with blue inset",
        "material badges with color dots"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table",
        "dropdown-menu",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Generate line board",
          "Export brand kit"
        ],
        "description": "Plan a 2026 palette system for fashion, interiors, branding, textiles, and product design without neon overload.",
        "eyebrow": "Soft Futurism + Electric Optimism",
        "headline": "Transformative teal line-board command center",
        "rows": [
          {
            "lead": "Teal/Lavender",
            "status": "Core",
            "theme": "Soft Futurism"
          },
          {
            "lead": "Clay/Oat",
            "status": "Warm",
            "theme": "Sun-Baked Modern"
          },
          {
            "lead": "Plum/Aubergine",
            "status": "Depth",
            "theme": "Dark Romantic"
          }
        ],
        "stats": [
          {
            "label": "Electric blue coverage",
            "value": "7%"
          },
          {
            "label": "Warm neutral grounding",
            "value": "41%"
          },
          {
            "label": "Cool luminous field",
            "value": "52%"
          }
        ]
      }
    },
    {
      "avoid": [
        "pastel fog",
        "low contrast text",
        "full blue backgrounds"
      ],
      "composition": "Material recipe editor dialog beside a sheet of approved color authorities and textile notes.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with blue ring",
        "teal enabled switch",
        "slider teal progress with blue handle"
      ],
      "primitives": [
        "dialog",
        "sheet",
        "textarea",
        "slider",
        "switch",
        "checkbox",
        "badge",
        "button",
        "separator",
        "input"
      ],
      "scene": {
        "actions": [
          "Approve recipe",
          "Send to textile lab"
        ],
        "description": "Tune the balance between luminous cool fields, warm clay grounding, and silver seam visibility.",
        "eyebrow": "Material recipe",
        "fields": [
          {
            "label": "Finish name",
            "value": "Lavender anodized shell"
          },
          {
            "label": "Teal percentage",
            "value": "34%"
          },
          {
            "label": "Silver seam",
            "value": "visible"
          }
        ],
        "headline": "Lavender anodized textile shell",
        "stats": [
          {
            "label": "Contrast pass",
            "value": "AA"
          },
          {
            "label": "Accent load",
            "value": "safe"
          }
        ]
      }
    },
    {
      "avoid": [
        "inventory wall",
        "dense unstyled table",
        "muddy brown dominance"
      ],
      "composition": "Operational table for batch assigning seasonal palettes across product categories with restrained status labels.",
      "id": "data-operations",
      "mustShowStates": [
        "selected table row with blue left edge",
        "dropdown menu selected item",
        "batch action button"
      ],
      "primitives": [
        "table",
        "checkbox",
        "dropdown-menu",
        "button",
        "card",
        "badge",
        "tabs",
        "separator",
        "tooltip",
        "select"
      ],
      "scene": {
        "actions": [
          "Batch assign",
          "Download CSV"
        ],
        "description": "Coordinate fashion, interiors, branding, textiles, and contemporary product applications from one disciplined palette system.",
        "eyebrow": "Cross-industry operations",
        "headline": "Assign trend stories by material family",
        "rows": [
          {
            "category": "Fashion outerwear",
            "palette": "Teal / Blue / Butter",
            "story": "Electric Optimism"
          },
          {
            "category": "Interior textiles",
            "palette": "Mineral / Copper / Oat",
            "story": "Biophilic Luxe"
          },
          {
            "category": "Beauty packaging",
            "palette": "Lavender / Silver / Coral",
            "story": "Soft Futurism"
          },
          {
            "category": "Product UI",
            "palette": "Chalk / Graphite / Teal",
            "story": "New Neutrals"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "transformative teal",
      "digital lavender",
      "controlled electric blue",
      "butter yellow",
      "muted coral"
    ],
    "border": "soft-silver-hairline-with-electric-blue-signal-segments",
    "contour": "rounded-editorial",
    "density": "balanced",
    "family": "soft-futurism",
    "grain": true,
    "material": "matte-mineral",
    "motion": "quiet-lift-and-focus-ring",
    "stickerBadges": true,
    "underlay": true
  }
}