"use client"; import { useState } from "react"; import { Button, Badge, Input, Progress, Avatar, Switch, Label, Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, BentoGrid, BentoGridCell, Collapsible, CollapsibleTrigger, CollapsibleContent, } from "@sigil-ui/components"; import { DemoShell, Panel, PanelSpacer, PanelHeader, } from "./_shell"; export default function PlaygroundDemo() { const [progress, setProgress] = useState(68); const [switchA, setSwitchA] = useState(true); const [switchB, setSwitchB] = useState(false); return ( {/* ── Navbar ──────────────────────────────────────────────── */}

Component Playground

{/* ── Hero ────────────────────────────────────────────────── */}

Live Components

Every component below is real, interactive, and token-driven. Switch presets and watch them all update.

{/* ── UI Components ───────────────────────────────────────── */} UI Components

Buttons Inputs Feedback Data {/* Buttons */}

{/* Inputs */}

Enabled

Dark mode

{/* Feedback */}

Upload progress {progress}%

Default Secondary Outline Error

{/* Data */}

Kevin L. Admin

Alex M. Editor

Jamie R. Viewer

Tara S. Owner

{/* ── Layout ──────────────────────────────────────────────── */} Layout

2-col nested

1-col sidebar

{[1, 2, 3, 4].map((n) => (

4-col

))}

{/* ── Interactive ─────────────────────────────────────────── */} Interactive

{/* Accordion */}

Accordion {["First Section", "Second Section", "Third Section"].map((title, i) => ( {title}

Content for {title.toLowerCase()}. This accordion item expands and collapses with smooth animation driven by token durations.

))}

{/* Tabs + Collapsible */}

Tabs Tab One Tab Two Tab Three

First tab content. Tabs consume token radius, borders, and motion.

Second tab content. Switch presets and see the visual change.

Third tab content. All styling flows from var(--s-*) tokens.

Collapsible

Collapsible content reveals on demand. Useful for progressive disclosure — show essential info first, details on interaction.

{/* ── Footer ──────────────────────────────────────────────── */}

); }