Components

Every shipped component, with its real preview. Click through for the full page — install command, usage, props and engineering notes.

Core

Button

A clickable control that triggers an action. Renders a native button element, or any element via the asChild prop when the trigger must be a link. Supports six visual variants (default, secondary, outline, ghost, destructive, link), four sizes including a square icon size, and a loading state that blocks interaction while announcing itself as busy to assistive technology. Use for actions such as submitting, saving or opening a dialog; use a plain anchor for navigation that changes the URL.

Plated dosa set

Serves two, ready in 12 minutes.

Crisp rice-and-lentil crepe, coconut chutney, and sambar on the side.

Card

A bordered content container exposed as composable sub-components — Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, CardImage — rather than a single prop-driven component. Supports a vertical (default) and horizontal orientation via the orientation prop; CardImage reads the parent's orientation to switch between a top-rounded banner and a left-rounded side panel. Depth comes from a 1px border token rather than a shadow. Use to group related content on a page, including image-led listing cards and pricing cards built by composing these parts with your own content; use Dialog instead when the content needs to interrupt the user or block interaction.

We'll only use this to send order updates.

Enter a valid email address.

Display name

Field

A composable form-field wrapper providing Field, FieldLabel, FieldControl, FieldDescription and FieldError parts that share one generated id set and automatically wire aria-describedby and aria-invalid onto whatever control is placed inside FieldControl. Has no opinion on form-state management — works with plain useState, react-hook-form, or any other library. Use it as the base every labeled input, textarea or custom control composes on top of; it is the primitive that GhostInput, SmartField and every other AI-in-product component in this system builds on.

Overlay Motion Primitive

The shared enter/exit animation layer for every overlay surface in the system — Dialog, Sheet, Popover and Drawer. Exports OverlayScrim (the backdrop) and OverlayContent (the panel, with a placement prop of center, top, bottom, left or right that controls which axis it translates from) plus a re-exported AnimatePresence. Not a standalone component: it has no dismiss behaviour, focus trapping or portal logic of its own. Compose it underneath a Radix primitive (Dialog.Overlay/Content, Sheet, Popover) so that primitive owns interaction semantics while this owns motion.

AI

Try "Thank you for your", "Following up", or "I wanted to check" — pause, then press Tab.

Ghost Input

A single-line text input with inline AI ghost-text completion: after the user pauses typing, a dimmed continuation appears past the caret, accepted with Tab or the right-arrow key (only when the caret is already at the end of the text) and dismissed with Escape. Takes a fetchSuggestion(value, signal) prop that the consumer implements against their own model — the component owns debouncing, request cancellation on every keystroke, staleness checking (a suggestion that doesn't continue the current text is discarded), and the accessible announcement of the suggestion via a live region. It never inserts text automatically; acceptance is always an explicit keypress. Use for reply drafting, search boxes, or any single-line field where predictive continuation should stay out of the way until the user asks for it. Not for multi-field or full-document autocomplete — this is a single <input>, not an editor.