# Crafter UI

React 19 / Tailwind 4 / shadcn Base UI. Use semantic tokens and preserve accessible states.

Design guidelines: https://ui.crafter.run/design.md
Install individual components: https://ui.crafter.run/r/<component>.json

## Accordion
Accordion with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/accordion


## Alert
Alert with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/alert


## Alert Dialog
Alert Dialog with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/alert-dialog


## Aspect Ratio
Aspect Ratio with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/aspect-ratio


## Attachment
Attachment with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/attachment


## Avatar
Avatar with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/avatar


## Badge
Compact labels for status, metadata, and categories.
Import: @/components/ui/badge
<Badge variant="secondary">In progress</Badge>

## Breadcrumb
Breadcrumb with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/breadcrumb


## Bubble
Bubble with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/bubble


## Button
The base action primitive, with variants, sizes, and keyboard interaction.
Import: @/components/ui/button
<Button variant="outline">Continue</Button>

## Button Group
Button Group with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/button-group


## Calendar
Calendar with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/calendar


## Card
A composable surface with explicit header, content, and footer slots.
Import: @/components/ui/card
<Card>
  <CardHeader><CardTitle>Workspace</CardTitle></CardHeader>
  <CardContent>Your content</CardContent>
</Card>

## Carousel
Carousel with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/carousel


## Chart
Chart with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/chart


## Checkbox
Checkbox with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/checkbox


## Collapsible
Collapsible with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/collapsible


## Combobox
Combobox with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/combobox


## Command
Command with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/command


## Context Menu
Context Menu with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/context-menu


## Data Table
Data Table with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/examples/data-table


## Date Picker
Date Picker with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/examples/date-picker


## Dialog
A focused overlay with keyboard dismissal and focus restoration.
Import: @/components/ui/dialog
<Dialog>
  <DialogTrigger render={<Button />}>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>A little focus</DialogTitle>
      <DialogDescription>Make room for one decision.</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

## Direction
Direction with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/direction


## Drawer
Drawer with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/drawer


## Dropdown Menu
Dropdown Menu with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/dropdown-menu


## Empty
Empty with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/empty


## Field
Field with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/field


## Hover Card
Hover Card with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/hover-card


## Input
A native input styled with the shared theme. Pair it with a visible label.
Import: @/components/ui/input
<Input aria-label="Project name" placeholder="My project" />

## Input Group
Input Group with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/input-group


## Input OTP
Input OTP with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/input-otp


## Item
Item with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/item


## Kbd
Kbd with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/kbd


## Label
Label with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/label


## Marker
Marker with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/marker


## Menubar
Menubar with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/menubar


## Message
Message with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/message


## Message Scroller
Message Scroller with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/message-scroller


## Native Select
Native Select with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/native-select


## Navigation Menu
Navigation Menu with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/navigation-menu


## Pagination
Pagination with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/pagination


## Popover
Popover with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/popover


## Progress
Progress with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/progress


## Questionnaire
Questionnaire with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/questionnaire


## Radio Group
Radio Group with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/radio-group


## Resizable
Resizable with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/resizable


## Scroll Area
Scroll Area with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/scroll-area


## Select
Select with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/select


## Separator
A quiet visual boundary between related sections.
Import: @/components/ui/separator
<Separator />

## Sheet
Sheet with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/sheet


## Sidebar
Sidebar with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/sidebar


## Skeleton
Skeleton with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/skeleton


## Slider
Slider with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/slider


## Spinner
An accessible loading indicator for an action in progress.
Import: @/components/ui/spinner
<Spinner />

## Switch
Switch with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/switch


## Table
Table with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/table


## Tabs
Tabs with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/tabs


## Textarea
Textarea with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/textarea


## Toast
Toast with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/toast


## Toggle
Toggle with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/toggle


## Toggle Group
Toggle Group with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/toggle-group


## Tooltip
Tooltip with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/ui/tooltip


## Typography
Typography with Crafter styling. Explore the live example and use the source in your project.
Import: @/components/examples/typography


## Action button
Pending state, disabled behavior, and a clear progress label.
Import: @/components/ui/action-button
<ActionButton pending={saving} pendingLabel="Saving…">Save changes</ActionButton>

## Copy button
Clipboard feedback that only succeeds when the copy does.
Import: @/components/ui/copy-button
<CopyButton value="bun run dev" />

## Text field
A label, description, and accessible validation in one place.
Import: @/components/ui/text-field
<TextField label="Project name" description="Visible to your team" required />

## Empty state
Explain what is missing and give people a next step.
Import: @/components/ui/empty-state
<EmptyState title="No projects yet" description="Create your first project." action={<Button>Create project</Button>} />

## Section heading
Consistent page hierarchy with room for an action.
Import: @/components/ui/section-heading
<SectionHeading title="Projects" description="Everything you are building." />

## Settings card
A complete settings surface with validation and async save feedback.
Import: @/components/ui/settings-card
<SettingsCard name="My project" onSave={saveProject} />

## Status indicator
Compact presence with a readable status label.
Import: @/components/ui/status-indicator
<StatusIndicator status="online" />

## Keyboard shortcut
A readable keyboard command with consistent keycaps.
Import: @/components/ui/keyboard-shortcut
<KeyboardShortcut keys={["⌘", "K"]} label="Search" />

## Search field
A controlled search input with an accessible clear action.
Import: @/components/ui/search-field
<SearchField value={query} onValueChange={setQuery} />

## Member item
Identity, contact and role in one compact row.
Import: @/components/ui/member-item
<MemberItem name="Alex Rivera" email="alex@example.com" memberRole="Owner" />

## Project card
Project status, progress and a clear next action.
Import: @/components/ui/project-card
<ProjectCard name="Crafter UI" description="Your component library" onOpen={openProject} />

## Notification preferences
Notification controls with async save and error feedback.
Import: @/components/ui/notification-preferences
<NotificationPreferences onSave={savePreferences} />

Create and maintain a library: https://ui.crafter.run/skill.md
Theme source: theme.json