# Clow

> A dark-first, glass-and-glow React design system. Open code: every component is
> installed as source via the shadcn CLI. Built on Base UI + Tailwind v4 + Motion.

## Setup (once per project)

Add the registry to components.json:

```json
{ "registries": { "@clow": "https://clow.cards/r/{name}.json" } }
```

Then install any component: `npx shadcn@latest add @clow/<name>`.
Machine-readable index: https://clow.cards/r/registry.json · Agent cards: https://clow.cards/r/agent/<name>.json

## layout

- [Accordion](https://clow.cards/llms/accordion.md): Stacked disclosure panels separated by hairline borders. The chevron turns as each panel unfolds on its measured height.
- [Collapsible](https://clow.cards/llms/collapsible.md): A single panel that unfolds under its trigger with a smooth height transition. The quiet sibling of Accordion.
- [Scroll Area](https://clow.cards/llms/scroll-area.md): Paper sliding under glass. Content dissolves at the edges that still have more to reveal; the only scrollbar is a dune hairline that firms up under the pointer and ignites ember while dragged · the light is the state.
- [Card](https://clow.cards/llms/card.md): A glass panel with the Clow edge-light. Variants for glass, plain paper, soft, and interactive lift.
- [Separator](https://clow.cards/llms/separator.md): A hairline divider: solid, fade-to-ends, or lit with edge-light.

## data-display

- [Avatar](https://clow.cards/llms/avatar.md): A profile image whose fallback initials sit on the brand gradient · a lit placeholder, never a gray box.
- [Badge](https://clow.cards/llms/badge.md): A status light in text form: tinted chips, optional leading dot, glow for the one badge that must be seen.
- [Kbd](https://clow.cards/llms/kbd.md): A tiny glass key cap for keyboard shortcuts — top edge lit, resting on a faint bottom shadow like a physical key.
- [Meter](https://clow.cards/llms/meter.md): A static reading on an instrument track · hairline ticks, an ink value zone, an ember needle at the reading. One ink fill regardless of value; the number carries the meaning.
- [Skeleton](https://clow.cards/llms/skeleton.md): Waiting for light: a quiet dune block whose top edge-light travels while the surface breathes — not a generic shimmer bar.
- [Icon Tile](https://clow.cards/llms/icon-tile.md): A soft-tinted plate that seats one icon · the little station crest that tells you what a step does before you read it.
- [Status Tag](https://clow.cards/llms/status-tag.md): Machine-room signage: a mono, uppercase pill with a breathing dot — the LIVE IN PRODUCTION stamp for systems that are actually on.
- [Keycap](https://clow.cards/llms/keycap.md): A full-size physical key for scene moments · ceramic surface lit on its top edge, standing on a real wall of shadow. Press it and it bottoms out.
- [Data Table](https://clow.cards/llms/data-table.md): A dense paper table: stamped header, mono column labels, hoverable rows, comfortable/compact density. Pass columns+rows or compose TableHead/TableRow/TableCell.

## navigation

- [Breadcrumb](https://clow.cards/llms/breadcrumb.md): A quiet trail of ink showing where the page lives. Links rest muted and surface on hover; only the current page is fully inked.
- [Command](https://clow.cards/llms/command.md): A command palette in a floating glass panel · type to filter, arrow keys to navigate, Enter to run. Powers the site's ⌘K console.
- [Tabs](https://clow.cards/llms/tabs.md): One tab primitive in three languages: a soft sliding pill (default), a springing ember underline, or browser folder chrome where the active tab lifts into paper and merges with the panel.
- [Menubar](https://clow.cards/llms/menubar.md): A quiet glass rail of application menus. Triggers stay unlit until opened, then their menu blooms below in floating glass.
- [Navigation Menu](https://clow.cards/llms/navigation-menu.md): Site navigation with rich glass panels. One shared popup morphs its size between menus and slides content in the direction of travel.
- [Nav Rail](https://clow.cards/llms/nav-rail.md): App side rail on paper: icon+label rows, active accent wash, optional collapsed icons-only mode. Shell navigation, not mega menus.

## actions

- [Button](https://clow.cards/llms/button.md): An ink button lit by natural light. Hover lifts it, press settles it, disabled turns the light off. The ember variant is for the one CTA that matters.
- [Toggle](https://clow.cards/llms/toggle.md): A two-state key. Pressed: a small internal accent mark appears at the bottom and grows both ways until the ends meet at the top — custom detail, not a border or fill.
- [Toolbar](https://clow.cards/llms/toolbar.md): A glass rail that keeps a row of controls under one roving focus. Arrow keys walk the rail; hairline separators split it into instrument groups.
- [Split Button](https://clow.cards/llms/split-button.md): Primary action plus a chevron menu: shares Button variants, hairline divider, float glass menu. SplitButtonItem for rows.

## overlays

- [Dialog](https://clow.cards/llms/dialog.md): A floating glass panel over a dimmed, blurred backdrop. Built on Base UI · focus trap, escape and scroll lock included.
- [Dropdown Menu](https://clow.cards/llms/dropdown-menu.md): A floating glass menu of actions. Highlighted items light up; destructive items turn red and never glow.
- [Popover](https://clow.cards/llms/popover.md): A floating glass panel anchored to its trigger · for lightweight settings, infotips and inline forms that should not block the page.
- [Sheet](https://clow.cards/llms/sheet.md): A full-height glass panel that slides in from an edge. Built on Base UI Drawer · swipe-to-dismiss, focus trap and scroll lock included.
- [Tooltip](https://clow.cards/llms/tooltip.md): A small glass chip that springs in beside a hovered or focused element. Visual label only · keep it short.
- [Context Menu](https://clow.cards/llms/context-menu.md): Right-click a surface and a floating glass menu blooms at the pointer. Same vocabulary as DropdownMenu · destructive items turn red and never glow.
- [Hover Card](https://clow.cards/llms/hover-card.md): A glass preview that springs in beside a hovered link · a glimpse of what's on the other side before you commit to the jump.

## forms

- [Input](https://clow.cards/llms/input.md): Paper text field. Focus warms the border and surface — no focus ring.
- [Checkbox](https://clow.cards/llms/checkbox.md): Soft bed when ticked; the check path draws itself. Indeterminate grows a dash from the center.
- [Label](https://clow.cards/llms/label.md): A form field caption that dims alongside its disabled peer control.
- [Radio Group](https://clow.cards/llms/radio-group.md): Selected: a ring draws from the bottom, then a soft center bead appears. Resting options stay quiet glass.
- [Select](https://clow.cards/llms/select.md): A glass dropdown field. The trigger focuses like an input; the popup is a floating glass panel that scales in with light.
- [Switch](https://clow.cards/llms/switch.md): An on/off toggle whose track lights up when on. The thumb slides; the light is the state.
- [Textarea](https://clow.cards/llms/textarea.md): A glass multi-line field that grows with its content. Focus is a ring of light; invalid fields glow red via aria-invalid.
- [Slider](https://clow.cards/llms/slider.md): An ink fill on a glass track. Pick a thumb — ceramic dot, thin line, or ridged grip — and it warms to ember while you drag; pass an array to get one thumb per value.
- [Toggle Group](https://clow.cards/llms/toggle-group.md): A glass rail that shares pressed state across its toggles. The pressed one rises to lit glass, echoing the tabs indicator.
- [Number Field](https://clow.cards/llms/number-field.md): A glass field flanked by ghost steppers that press individually. The border warms while you type, and the label doubles as a scrub area.
- [Input OTP](https://clow.cards/llms/input-otp.md): A row of glass cells for one-time codes. The focused cell gets an ember ring; filled cells settle into brighter glass.
- [Combobox](https://clow.cards/llms/combobox.md): A glass input that thinks while you type. The list filters live in the same floating panel Select uses · pick with arrows, clear with one press.
- [Checkbox Group](https://clow.cards/llms/checkbox-group.md): A quiet column that shares state across its checkboxes. One value array in, and an optional parent key that flips the whole group at once.
- [Field](https://clow.cards/llms/field.md): The frame around every form control: label, hint and error wired together, with validity flowing into the control's red glow automatically.
- [Form](https://clow.cards/llms/form.md): A native form with consolidated error handling: client validation and server errors land in the same Field slots, keyed by name.
- [File Upload](https://clow.cards/llms/file-upload.md): Files on paper, three ways: FileUpload is the way in (a dashed dropzone, a quiet text-only zone, or a compact button) with real click and drag-and-drop; FileChip is a small pill to pin above a chat composer; FileCard is the landed file with a live image preview or type icon, size, progress hairline and remove. While a file hovers the dropzone, the edge-light flares and the border warms toward the accent.

## feedback

- [Alert](https://clow.cards/llms/alert.md): Inline status panel. Color lives in border + soft wash + icon tint; destructive is matte and never glows.
- [Alert Dialog](https://clow.cards/llms/alert-dialog.md): A glass dialog that demands a response before proceeding. No outside-click dismissal · the user must choose. Built on Base UI Alert Dialog.
- [Progress](https://clow.cards/llms/progress.md): A recessed glass track filled with ink under a warm ember sheen. Determinate, or indeterminate when value is null. Built on Base UI Progress.
- [Spinner](https://clow.cards/llms/spinner.md): An ember comet orbiting a faint glass track — a fading tail behind a luminous head. For short, unmeasurable waits; the spin slows down when the user prefers reduced motion.
- [Toast](https://clow.cards/llms/toast.md): Wider compact paper notices. Title row with trailing drawn status mark, full-width description. Toaster position: top/bottom × left/center/right.
- [Empty State](https://clow.cards/llms/empty-state.md): A quiet centered composition for empty moments: an icon in a soft glass circle, a display-face title, and room for the action that fills the emptiness.

## cards

- [Workflow](https://clow.cards/llms/workflow.md): Relay stations wired together with dashed hairlines, each step an unboxed cluster of crest, title and sublabel. No cards, no shadows: done steps settle into quieter ink, waiting steps are barely written, and the active one carries a hairline of warm light beneath it. Connectors can tip with a fine arrowhead and carry a tiny ember petal, the signal traveling toward the active station.
- [Chat Bubble](https://clow.cards/llms/chat-bubble.md): A transcript with the agent: the user speaks in soft glass, the agent answers on quiet paper with a directional corner. Four surface variants (solid, soft, outline, ghost), an ember accent tone, author and timestamp lines, a crest avatar, a typing state, file-card attachments and a frosted composer.
- [Scene Card](https://clow.cards/llms/scene-card.md): A postcard of the mesh at sundown: the page washed with the theme's gradient tokens at low alpha, a whisper of Bayer grain, edge-light along the top and settled ink for the label. Paper in late sun in light mode, a tile of quiet ember in dark.
- [Shuffle Cards](https://clow.cards/llms/shuffle-cards.md): A hand of quotes fanned like a held deck: drag the front card past the edge (or press an arrow key) and it flies off while the next one straightens up into the light. Opaque frosted paper cards, serif italic quotes, no motion library.
- [File Tree](https://clow.cards/llms/file-tree.md): A paper file tree with fixed outer height: open/close animates inside a scrollport so the card and page never reflow. Icons, chevrons, meta, header and five branch animations are all tunable.
- [Device Mock](https://clow.cards/llms/device-mock.md): Flat, minimal frames for phone, browser and tablet. Thin border, soft shadow, quiet chrome — no side buttons, no island theater. Drop children or src into the screen.
- [Log Card](https://clow.cards/llms/log-card.md): A transmission log on paper: stamped mono header with an optional breathing status dot, and small-print rows of time / label / event / value in tabular numbers. Hovering a row lifts its ink; with live, freshly mounted rows land with a brief warm flash.
- [Avatar Circles](https://clow.cards/llms/avatar-circles.md): Overlapping initial circles on a paper ring, each tinted by a quiet token-mixed tone, closed by a tenue keycap +N counter. Hover lifts a circle above its neighbors; an optional live dot puts an ember glow on the first avatar. No remote images, ever.
- [Terminal](https://clow.cards/llms/terminal.md): A transmission session that plays itself: lines land in order like a log being written, commands type themselves under an ember caret, and the whole session waits until the reader scrolls it into view.
- [Bento Grid](https://clow.cards/llms/bento-grid.md): A wall of paper cells under one light, drawn by hand: a 6-column sheet with short unit rows where every card claims its own spans, so the composition is asymmetric on purpose. Each tile carries a live visual up top and a quiet label at the bottom; hover lifts the cell toward a brightening hairline.
- [Dock](https://clow.cards/llms/dock.md): A frosted glass shelf of paper tiles that grow gently toward the pointer while an ember point blooms on the shelf under the closest tile, fading with the same falloff. Everything settles back in one calm ease when the pointer leaves.
- [Marquee](https://clow.cards/llms/marquee.md): A seamless belt of signage gliding past a fixed window: children doubled once, pushed at a constant walking pace, both ends dissolving into the paper. double adds a second belt underneath running the opposite way a touch slower, and edge engraves hairline rails above and below the lane.
- [Confetti](https://clow.cards/llms/confetti.md): Paper confetti in the warm palette: a quiet outline button that throws tiny paper rectangles and ember sparks from its center, tumbling under gravity and settling like torn ticket stubs. The default paper reads the theme tokens at burst time, and named palettes (ember, sakura, meadow, ink) offer hand-tuned warm sets. No rainbow.
- [Lens](https://clow.cards/llms/lens.md): A reading glass over the paper: a circular lens follows the cursor and magnifies the wrapped content, ringed by a hairline lit from above with a faint warm glow.
- [Transmission Feed](https://clow.cards/llms/transmission-feed.md): The station's live log: mesh events arrive one by one, the newest sliding in at the top under a flash of edge-light while the rest settle down a row. Waits to be scrolled into view, loops with a quiet breath between passes.
- [Code Comparison](https://clow.cards/llms/code-comparison.md): One sheet of code, two moments in time: a draggable vertical seam slides the after state across the before state like a light table. Removed lines tinted toward destructive, added lines lit by the warm accent wash. The seam sweeps in from the right edge on first view.
- [Code Window](https://clow.cards/llms/code-window.md): A paper code sheet with quiet chrome (three muted dots + filename), optional language stamp, line numbers, and soft accent highlights. No dark IDE slabs.
- [Browser Tabs](https://clow.cards/llms/browser-tabs.md): A paper tab strip for multi-pane product UIs: active tab on surface-2, soft close and new-tab controls, optional body slot. Not a fake Safari chrome.
- [Keycap Board](https://clow.cards/llms/keycap-board.md): A small console of physical Keycaps on paper: rows of labels, active keys wash with accent, optional mono caption. Scene prop for shortcuts, not inline Kbd.
- [Command Palette Card](https://clow.cards/llms/command-palette-card.md): A fixed-footprint paper command palette for product cards and demos: search shell, grouped rows, kbd hints. Not the live Command autocomplete.
- [Diff Card](https://clow.cards/llms/diff-card.md): A single-sheet git-style diff on paper: +/− gutter marks, soft success/destructive washes, auto stats. No drag seam (see Code Comparison for that).
- [Agent Card](https://clow.cards/llms/agent-card.md): A living agent on paper: crest, name, role, breathing status, model stamp, tool chips, and an optional action slot.
- [Price Card](https://clow.cards/llms/price-card.md): A quiet pricing tier on paper: plan name, large tabular price, feature list with accent beads, optional highlighted border and badge, CTA slot.
- [Feature Row](https://clow.cards/llms/feature-row.md): One feature on a horizontal paper line: icon tile, title, description, optional trailing mark. interactive lifts on hover. Stack with FeatureList.
- [Timeline](https://clow.cards/llms/timeline.md): A vertical paper trail: beads on a hairline, mono timestamps, done/active/upcoming status. Active bead breathes with accent.
- [Toast Stack](https://clow.cards/llms/toast-stack.md): A stacked preview of paper notices for docs and marketing: depth via scale/opacity, optional expanded list. Not the live Toaster.
- [Profile Card](https://clow.cards/llms/profile-card.md): A person on paper: crest, name, handle, bio, mono meta, tabular stats, optional action. Distinct from AgentCard (runtime status).
- [Stepper](https://clow.cards/llms/stepper.md): A wizard trail on paper: numbered beads, done/current/upcoming, horizontal or vertical. Distinct from Timeline (event log).
- [Testimonial](https://clow.cards/llms/testimonial.md): Voices on paper in four layouts: quote, card, compact, featured. Crest + author + role. Stack with TestimonialRow.
- [Copy Snippet](https://clow.cards/llms/copy-snippet.md): A paper install stamp with mono code and a copy control that flashes a tick on success.
- [Calendar Card](https://clow.cards/llms/calendar-card.md): A quiet month sheet on paper: Monday-first grid, selected/today marks, event beads under days. Fixed footprint.
- [Kanban](https://clow.cards/llms/kanban.md): A paper kanban board: stamped title, columns with tone flags, WIP counts and compact tagged cards. Three chromes (outlined, soft, ruled). Presentational (no drag library).

## backgrounds

- [Light Field](https://clow.cards/llms/light-field.md): The system's light source as a living background: two enormous radial fields of warm token light drifting over the paper across tens of seconds, like sun behind a curtain.
- [Dither Field](https://clow.cards/llms/dither-field.md): A breathing field of dithered light: the theme's gradient tokens quantized through a Bayer matrix, with the color slowly drifting under a fixed pixel grain, like weather behind a screen door.
- [Dot Surface](https://clow.cards/llms/dot-surface.md): The sea under the page: a field of ink dots laid out in perspective, swelling in slow traveling waves, the crests warming toward the ember accent for a moment. Plain canvas, live theme tokens, no WebGL, no dependencies.
- [Warp Field](https://clow.cards/llms/warp-field.md): Domain-warped ink weather with a mouse-dug well. Transparent, dark-safe.
- [Vortex Well](https://clow.cards/llms/vortex-well.md): A spinning well of ink arms that tightens under the pointer.
- [Magnetic Lines](https://clow.cards/llms/magnetic-lines.md): Field lines of ink that bend toward the hand like iron filings.
- [Filament Grid](https://clow.cards/llms/filament-grid.md): A paper grid of filaments that warps toward the pointer like cloth.
- [Pulse Halo](https://clow.cards/llms/pulse-halo.md): Expanding ember rings that radiate from the hand or the center.
- [Ink Storm](https://clow.cards/llms/ink-storm.md): Chaotic domain-warped streaks that fury up near the pointer.
- [Horizon Band](https://clow.cards/llms/horizon-band.md): A shimmering horizon of light that tracks the pointer vertically.
- [Petal Fall](https://clow.cards/llms/petal-fall.md): A rain of single tumbling sakura petals. Density controls how many fall — sparse drift or full blizzard. Wind follows the hand.
- [Line Field](https://clow.cards/llms/line-field.md): Hard monochrome ink calligraphy strokes — variable-width pen paths. No soft fog, pure line.
- [Warp Drive](https://clow.cards/llms/warp-drive.md): Sparse hyperspace: angular streak slots with hot white cores and ember tips. Speed lines, not a tunnel wash.
- [Ink Glitch](https://clow.cards/llms/ink-glitch.md): Brutalist print glitch: binary bars, hard slice tears, solid corruption blocks. No soft gradients.
- [Star Dust](https://clow.cards/llms/star-dust.md): Mostly empty night: sparse pin-point stars with rare cross flares and a thin dust ellipse.
- [Meta Ink](https://clow.cards/llms/meta-ink.md): Heavy sumi metaballs — black liquid body, warm wet rim, specular highlight. Merging is the subject.
- [Simplex Flow](https://clow.cards/llms/simplex-flow.md): Wide poured-ink rivers advected by curl noise — continuous ribbons, not particle dashes or flat fbm.
- [Wave Sheet](https://clow.cards/llms/wave-sheet.md): Clear horizontal wavefront crests with slope lighting — readable ocean lines on paper.
- [Swirl Ink](https://clow.cards/llms/swirl-ink.md): Archimedean brush spiral — a single graphic coil of ink, not a soft galaxy spin.
- [Ferro Ink](https://clow.cards/llms/ferro-ink.md): A Clow original ferrofluid: dual value-noise peaks fused with smooth-min, a razor luminous rim, shimmer and a mouse well. Production-grade parameters — turbulence, fluidity, rim, glow — pigmented by live theme tokens. No OGL, no neon.
- [Plasma Wave](https://clow.cards/llms/plasma-wave.md): Standing plasma of paper light: multi-frequency interference sheets with a traveling phase front, hot crests and a mouse-warped domain. Reactbits energy, Clow pigment.
- [Pixel Blast](https://clow.cards/llms/pixel-blast.md): Chunky pixel shrapnel exploding from a focus — blocky debris, shock rings, and ember sparks. Arcade blast energy, paper palette.
- [Liquid Ether](https://clow.cards/llms/liquid-ether.md): Ethereal liquid sheets: layered curl advection, soft caustic ribbons and a viscous mouse drag. Silk-and-smoke, not ferro rims.
- [Hyper Streak](https://clow.cards/llms/hyper-streak.md): Hyperspeed corridor: depth-layered star rods with Doppler-hot tips, focus locked to the hand. Different species from warp-drive.
- [Glyph Glitch](https://clow.cards/llms/glyph-glitch.md): Typographic corruption: a grid of SDF pseudo-glyphs that tear, swap channels and scramble under the hand. Letter-glitch energy without a font file.

## effects

- [Shine Button](https://clow.cards/llms/shine-button.md): A button with a traveling paper sheen — direction, duration, intensity and ember tint are all tunable. Forever mode loops the sweep.
- [DVD Bounce](https://clow.cards/llms/dvd-bounce.md): The corner-bouncing screensaver on a dark TV screen. A flat logo ricochets off the four walls, flips to a bright new hue on every hit, and celebrates an exact corner landing. Holds text, initials or an image.
- [Magnetic Button](https://clow.cards/llms/magnetic-button.md): A button that leans toward the pointer. Strength, stiffness, axis, scale and pad are all playground knobs. Transform-only — no layout shift.
- [Sakura Cursor](https://clow.cards/llms/sakura-cursor.md): A petal instead of a pointer: wrap a region and, while the pointer is inside it, a soft sakura petal replaces the native cursor, opening wider and warming toward the accent over anything interactive. Small petals scatter off on their own random arcs; leave the region and the pointer comes back.
- [Signal Beam](https://clow.cards/llms/signal-beam.md): A transmission line, not a laser: a dashed hairline with slowly marching dashes, and every couple of seconds a packet of ember light rides it with a short warm tail.
- [Reveal](https://clow.cards/llms/reveal.md): The fog lifts off the paper: children enter blurred, slightly low and transparent, then sharpen into place as they scroll into view. Clow's primitive for composing landings.
- [Filament Button](https://clow.cards/llms/filament-button.md): A quiet outline until you reach for it: on hover a short ember filament orbits the border like a heated wire, and on press the whole perimeter lights for an instant.

## text

- [Lit Text](https://clow.cards/llms/lit-text.md): The house signature on type: a band of warm light sweeps across the letters, lifting them from muted ink to full foreground with a hairline of edge-light at the crest. The same light that walks the skeleton, now walking your words.
- [Ink Text](https://clow.cards/llms/ink-text.md): Text that arrives the way ink meets paper: each word lands wet and blurred, then absorbs into a sharp line, cascading as the reader scrolls it into view.
- [Tally](https://clow.cards/llms/tally.md): A number that counts itself up when it enters view, eases into place, and settles with a single ember breath. Tabular digits, no jitter, no fireworks.
- [Sakura Text](https://clow.cards/llms/sakura-text.md): A word in the petal wind: the whole fill breathes with living warm light while a whirlwind of soft pink sakura petals rides across the word from left to right, each petal spinning on itself, some passing in front of the letters and some behind.
- [Hyper Text](https://clow.cards/llms/hyper-text.md): An intercepted signal resolving: characters flicker through scramble glyphs, then lock into place left to right, like a callsign clearing on the uplink.
- [Morphing Text](https://clow.cards/llms/morphing-text.md): One thought becoming the next: a word blurs, loosens into light, and re-condenses as the following word, like ink evaporating and re-settling on the paper.
- [Depth Text](https://clow.cards/llms/depth-text.md): Letterpress under a light from above: glyphs extruded down into the paper in warm ink layers, a hairline of edge-light kissing the top of every letter, and an optional subtle lean toward the cursor.