Open components. Human language. Agent-ready structure.
Components
A shadcn-style open component directory with anatomy, variants, states, accessibility notes, implementation guidance, AI prompts, and tokens.
Component groups
Each component now has anatomy, variants, states, styling tokens, accessibility notes, AI prompts, negative prompts, and shadcn implementation guidance.
Actions
Button
Trigger a primary or secondary action with a clear hierarchy.
Icon Button
Compress a frequent action into a square target with an accessible label.
Split Button
Pair a default action with a secondary menu without crowding the toolbar.
Command Button
Open an action or command with a label that feels deliberate and system-like.
Copy Button
Copy nearby text or code with clear success feedback.
Inputs
Search Field
Let users filter or find content with a native, calm input.
Text Field
Collect short text with label, helper text, and validation affordances.
Prompt Input
Compose AI instructions with space for context, actions, and submit state.
Textarea
Collect longer text without making the form feel heavy.
Select
Choose one value from a known set with a compact trigger.
Combobox
Search and choose from a larger option set with keyboard support.
Checkbox
Toggle a single option or select multiple items in a list.
Radio Group
Choose exactly one option from a small visible set.
Switch
Toggle a persistent binary setting with immediate clarity.
Slider
Adjust a numeric value with direct manipulation.
File Drop Zone
Invite uploads with clear constraints, state, and fallback action.
Settings Row
Combine setting label, explanation, and control in one quiet row.
Feedback
Toast
Report transient feedback without blocking the current task.
Alert
Surface important status or warning information inline.
Progress
Show task completion honestly without over-promising precision.
Skeleton
Reserve layout while content loads, then settle into real content.
Empty State
Explain why content is missing and offer the next useful action.
Copy Confirmation
Confirm copied content with a tiny state change or lightweight toast.
Upload Queue
Track file upload progress with item-level status and recovery.
Surfaces
Card
Group related information and action affordances in a scannable surface.
Command Card
Make a clickable card behave like a focused command surface.
Dialog
Interrupt the flow only when a user must make a focused decision.
Drawer
Reveal secondary detail or editing context from the page edge.
Popover
Attach lightweight contextual content to a nearby trigger.
Tooltip
Explain a compact control without adding persistent UI text.
Inspector Panel
Show selected-object metadata and actions in a compact side panel.
Bento Grid
A responsive grid layout for showcasing features in asymmetric cards.
Hero Video Dialog
A play-button overlay that opens a video in a dialog.
Tweet Card
Embed a styled tweet preview with author and engagement stats.
Safari
A Safari browser mockup frame for showcasing web content.
iPhone
An iPhone device mockup for showcasing mobile apps.
Android
An Android device mockup for showcasing mobile apps.
Data Display
Badge
Label status, category, or metadata without adding visual weight.
Table
Display dense rows with restrained borders and clear column hierarchy.
Table Row
Make a row scannable, selectable, and action-ready.
Metric Card
Show one important number with enough context to interpret it.
Timeline
Show ordered events or background work in a readable vertical rhythm.
Code Block
Present copyable code with language, contrast, and restrained controls.
Avatar Circles
Overlapping avatar circles that show a group of users.
File Tree
A nested file and folder tree with expand/collapse.
Code Comparison
Side-by-side before/after code with diff highlighting.