Crafter UI

Your component registry is ready.

Starter · Catalog · Agent instructions

• Accordion: Accordion with Crafter styling. Explore the live example and use the source in your project.
• Alert: Alert with Crafter styling. Explore the live example and use the source in your project.
• Alert Dialog: Alert Dialog with Crafter styling. Explore the live example and use the source in your project.
• Aspect Ratio: Aspect Ratio with Crafter styling. Explore the live example and use the source in your project.
• Attachment: Attachment with Crafter styling. Explore the live example and use the source in your project.
• Avatar: Avatar with Crafter styling. Explore the live example and use the source in your project.
• Badge: Compact labels for status, metadata, and categories.
• Breadcrumb: Breadcrumb with Crafter styling. Explore the live example and use the source in your project.
• Bubble: Bubble with Crafter styling. Explore the live example and use the source in your project.
• Button: The base action primitive, with variants, sizes, and keyboard interaction.
• Button Group: Button Group with Crafter styling. Explore the live example and use the source in your project.
• Calendar: Calendar with Crafter styling. Explore the live example and use the source in your project.
• Card: A composable surface with explicit header, content, and footer slots.
• Carousel: Carousel with Crafter styling. Explore the live example and use the source in your project.
• Chart: Chart with Crafter styling. Explore the live example and use the source in your project.
• Checkbox: Checkbox with Crafter styling. Explore the live example and use the source in your project.
• Collapsible: Collapsible with Crafter styling. Explore the live example and use the source in your project.
• Combobox: Combobox with Crafter styling. Explore the live example and use the source in your project.
• Command: Command with Crafter styling. Explore the live example and use the source in your project.
• Context Menu: Context Menu with Crafter styling. Explore the live example and use the source in your project.
• Data Table: Data Table with Crafter styling. Explore the live example and use the source in your project.
• Date Picker: Date Picker with Crafter styling. Explore the live example and use the source in your project.
• Dialog: A focused overlay with keyboard dismissal and focus restoration.
• Direction: Direction with Crafter styling. Explore the live example and use the source in your project.
• Drawer: Drawer with Crafter styling. Explore the live example and use the source in your project.
• Dropdown Menu: Dropdown Menu with Crafter styling. Explore the live example and use the source in your project.
• Empty: Empty with Crafter styling. Explore the live example and use the source in your project.
• Field: Field with Crafter styling. Explore the live example and use the source in your project.
• Hover Card: Hover Card with Crafter styling. Explore the live example and use the source in your project.
• Input: A native input styled with the shared theme. Pair it with a visible label.
• Input Group: Input Group with Crafter styling. Explore the live example and use the source in your project.
• Input OTP: Input OTP with Crafter styling. Explore the live example and use the source in your project.
• Item: Item with Crafter styling. Explore the live example and use the source in your project.
• Kbd: Kbd with Crafter styling. Explore the live example and use the source in your project.
• Label: Label with Crafter styling. Explore the live example and use the source in your project.
• Marker: Marker with Crafter styling. Explore the live example and use the source in your project.
• Menubar: Menubar with Crafter styling. Explore the live example and use the source in your project.
• Message: Message with Crafter styling. Explore the live example and use the source in your project.
• Message Scroller: Message Scroller with Crafter styling. Explore the live example and use the source in your project.
• Native Select: Native Select with Crafter styling. Explore the live example and use the source in your project.
• Navigation Menu: Navigation Menu with Crafter styling. Explore the live example and use the source in your project.
• Pagination: Pagination with Crafter styling. Explore the live example and use the source in your project.
• Popover: Popover with Crafter styling. Explore the live example and use the source in your project.
• Progress: Progress with Crafter styling. Explore the live example and use the source in your project.
• Questionnaire: Questionnaire with Crafter styling. Explore the live example and use the source in your project.
• Radio Group: Radio Group with Crafter styling. Explore the live example and use the source in your project.
• Resizable: Resizable with Crafter styling. Explore the live example and use the source in your project.
• Scroll Area: Scroll Area with Crafter styling. Explore the live example and use the source in your project.
• Select: Select with Crafter styling. Explore the live example and use the source in your project.
• Separator: A quiet visual boundary between related sections.
• Sheet: Sheet with Crafter styling. Explore the live example and use the source in your project.
• Sidebar: Sidebar with Crafter styling. Explore the live example and use the source in your project.
• Skeleton: Skeleton with Crafter styling. Explore the live example and use the source in your project.
• Slider: Slider with Crafter styling. Explore the live example and use the source in your project.
• Spinner: An accessible loading indicator for an action in progress.
• Switch: Switch with Crafter styling. Explore the live example and use the source in your project.
• Table: Table with Crafter styling. Explore the live example and use the source in your project.
• Tabs: Tabs with Crafter styling. Explore the live example and use the source in your project.
• Textarea: Textarea with Crafter styling. Explore the live example and use the source in your project.
• Toast: Toast with Crafter styling. Explore the live example and use the source in your project.
• Toggle: Toggle with Crafter styling. Explore the live example and use the source in your project.
• Toggle Group: Toggle Group with Crafter styling. Explore the live example and use the source in your project.
• Tooltip: Tooltip with Crafter styling. Explore the live example and use the source in your project.
• Typography: Typography with Crafter styling. Explore the live example and use the source in your project.
• Action button: Pending state, disabled behavior, and a clear progress label.
• Copy button: Clipboard feedback that only succeeds when the copy does.
• Text field: A label, description, and accessible validation in one place.
• Empty state: Explain what is missing and give people a next step.
• Section heading: Consistent page hierarchy with room for an action.
• Settings card: A complete settings surface with validation and async save feedback.
• Status indicator: Compact presence with a readable status label.
• Keyboard shortcut: A readable keyboard command with consistent keycaps.
• Search field: A controlled search input with an accessible clear action.
• Member item: Identity, contact and role in one compact row.
• Project card: Project status, progress and a clear next action.
• Notification preferences: Notification controls with async save and error feedback.