# dryui

> 133 zero-dependency Svelte 5 components with headless primitives, styled defaults, and AI-ready MCP server.

## Packages

- @dryui/primitives: Headless, unstyled components
- @dryui/ui: Styled components with CSS variables and theme system
- @dryui/mcp: MCP server for AI-agent code generation

## Installation

```
bun add @dryui/ui
```

## Theme Setup

```html
<!-- In your root layout or app entry -->
<link rel="stylesheet" href="@dryui/ui/themes/default.css" />
<link rel="stylesheet" href="@dryui/ui/themes/dark.css" />
```

```html
<!-- Preferred default: follow the browser/OS theme -->
<html class="theme-auto" />
```

Use `data-theme="light"` or `data-theme="dark"` only for explicit overrides. If you build a theme toggle, persist the explicit override and keep system mode as the fallback.

## Components

### Category: Action

### Button
Interactive button or link-styled action for submissions and calls to action.
Import: @dryui/ui
Subpath import: @dryui/ui/button
Props: variant ('solid' | 'outline' | 'ghost' | 'soft' | 'secondary' | 'link'), accepted solid, outline, ghost, soft, secondary, link, default 'solid' | size ('sm' | 'md' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'), accepted sm, md, lg, icon, icon-sm, icon-lg, default 'md' | color ('primary' | 'danger'), accepted primary, danger, default 'primary' | disabled (boolean) | href (string), When provided, Button renders an anchor instead of a button for link-style actions. | rel (string) | target (string) | download (boolean | string) | type ('button' | 'submit' | 'reset'), accepted button, submit, reset | children (Snippet), required
Data attributes: data-disabled
Example: <Button variant="solid" onclick={handleClick}>Save</Button>

### Toggle
Pressable toggle button.
Import: @dryui/ui
Subpath import: @dryui/ui/toggle
Props: pressed (boolean), default false, bindable | variant ('outline' | 'ghost'), accepted outline, ghost, default 'outline' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-state
Example: <Toggle>Content</Toggle>

### ToggleGroup
Group of toggle buttons with single/multiple selection.
Import: @dryui/ui
Subpath import: @dryui/ui/toggle-group
Parts: Root, Item
Props: Root: type ('single' | 'multiple'), accepted single, multiple | value (string[]), default [], bindable | disabled (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-state
Example: <ToggleGroup.Root>

### Clipboard
Copy text to clipboard with native Clipboard API.
Import: @dryui/ui
Subpath import: @dryui/ui/clipboard
Props: value (string), required | timeout (number) | children (Snippet<[{ copied: boolean; copy: () => void }]>), required
Example: <Clipboard>Content</Clipboard>

### ScrollToTop
Button that scrolls to top of page or container.
Import: @dryui/ui
Subpath import: @dryui/ui/scroll-to-top
Props: threshold (number), default 300 | target (HTMLElement) | behavior (ScrollBehavior), default 'smooth' | position ('bottom-right' | 'bottom-left' | 'bottom-center'), accepted bottom-right, bottom-left, bottom-center, default 'bottom-right' | class (string)
Data attributes: data-theme, data-visible
Example: <ScrollToTop>Content</ScrollToTop>

### FloatButton
Floating action button with expandable actions.
Import: @dryui/ui
Subpath import: @dryui/ui/float-button
Parts: Root, Trigger, Action
Props: Root: open (boolean), default false, bindable | position ('bottom-right' | 'bottom-left'), accepted bottom-right, bottom-left, default 'bottom-right' | children (Snippet), required | Trigger: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | Action: children (Snippet), required
Data attributes: data-state, data-theme
Example: <FloatButton.Root>

### ButtonGroup
Groups related buttons with shared styling.
Import: @dryui/ui
Subpath import: @dryui/ui/button-group
Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required
Example: <ButtonGroup>Content</ButtonGroup>

### Chip
Interactive pill for filters, selections, and inline state.
Import: @dryui/ui
Subpath import: @dryui/ui/chip
Data attributes: data-disabled, data-selected, data-theme
Example: <Chip variant="soft" color="blue">Policy friendly</Chip>

### ChipGroup
Single or multi-select chip cluster.
Import: @dryui/ui
Subpath import: @dryui/ui/chip-group
Parts: Root, Item
Props: Root: type ('single' | 'multiple'), accepted single, multiple, default 'single' | value (string[]), default [], bindable | disabled (boolean), default false | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | size ('sm' | 'md'), accepted sm, md, default 'sm' | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-state, data-theme
Example: <ChipGroup.Root type="multiple" bind:value={selectedFilters}>

### Category: Input

### Input
Text input with size variants.
Import: @dryui/ui
Subpath import: @dryui/ui/input
Props: value (string), default '', bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Data attributes: data-disabled, data-invalid
Example: <Input type="email" bind:value={email} placeholder="you@example.com" />

### Textarea
Multi-line text input.
Import: @dryui/ui
Subpath import: @dryui/ui/textarea
Props: value (string), default '', bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Data attributes: data-disabled, data-invalid
Example: <Textarea bind:value={message} placeholder="Write a message…" />

### PromptInput
AI-style prompt input with auto-resize and submit.
Import: @dryui/ui
Subpath import: @dryui/ui/prompt-input
Props: value (string), default '' | placeholder (string) | disabled (boolean) | onpromptsubmit ((value: string) => void) | actions (Snippet)
Data attributes: data-disabled, data-part, data-theme
Example: <PromptInput>Content</PromptInput>

### NumberInput
Numeric input with increment/decrement controls.
Import: @dryui/ui
Subpath import: @dryui/ui/number-input
Props: value (number), default 0, bindable | min (number) | max (number) | step (number) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md', Adjusts input density and its default maximum width for compact counter-style fields. | disabled (boolean)
Data attributes: data-disabled
Example: <NumberInput bind:value={quantity} min={0} max={100} step={1} size="sm" />

### Checkbox
Boolean toggle input with indeterminate state.
Import: @dryui/ui
Subpath import: @dryui/ui/checkbox
Props: checked (boolean), default false, bindable | indeterminate (boolean), default false | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Data attributes: data-disabled, data-invalid, data-state
Example: <Checkbox bind:checked={agreed}>I agree to the terms</Checkbox>

### Switch
Toggle switch for boolean values.
Import: @dryui/ui
Subpath import: @dryui/ui/switch
Props: checked (boolean), default false, bindable | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean)
Data attributes: data-disabled, data-state
Example: <Switch bind:checked={darkMode}>Dark mode</Switch>

### RadioGroup
Single selection from multiple options.
Import: @dryui/ui
Subpath import: @dryui/ui/radio-group
Parts: Root, Item
Props: Root: value (string), bindable | name (string) | disabled (boolean) | required (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet)
Data attributes: data-disabled, data-orientation
Example: <RadioGroup.Root>

### Slider
Range input slider with thumb control.
Import: @dryui/ui
Subpath import: @dryui/ui/slider
Props: value (number), default 50, bindable | min (number) | max (number) | step (number) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | disabled (boolean) | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical
Data attributes: data-disabled, data-orientation
Example: <Slider bind:value={volume} min={0} max={100} />

### Listbox
Single or multi-select list with keyboard navigation.
Import: @dryui/ui
Subpath import: @dryui/ui/listbox
Parts: Root, Item
Props: Root: value (string | string[]), default '', bindable | multiple (boolean), default false | disabled (boolean) | onvaluechange ((value: string | string[]) => void) | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-selected, data-theme
Example: <Listbox.Root>

### PinInput
Segmented input for PIN/OTP codes with single hidden input architecture.
Import: @dryui/ui
Subpath import: @dryui/ui/pin-input
Parts: Root, Group, Cell, Separator
Props: Root: value (string), default '', bindable | length (number), default 4 | mask (boolean), default false | type ('numeric' | 'alphanumeric'), accepted numeric, alphanumeric, default 'numeric' | pattern (RegExp) | placeholder (string), default '○' | disabled (boolean), default false | oncomplete ((value: string) => void) | pasteTransformer ((text: string) => string) | blurOnComplete (boolean), default false | name (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | variant ('outline' | 'flushed'), accepted outline, flushed, default 'outline' | children (Snippet<[{ cells: PinInputCellType[] }]>) | Group: children (Snippet), required | Cell: cell (PinInputCellType), required | children (Snippet<[{ char: string | null; isActive: boolean; hasFakeCaret: boolean }]>) | Separator: children (Snippet)
Data attributes: data-active, data-disabled, data-error, data-pin-input-caret, data-pin-input-hidden, data-pin-input-placeholder, data-state
Example: <PinInput.Root bind:value={pin} length={6} oncomplete={handleVerify}>

### Rating
Star rating input with half-star support.
Import: @dryui/ui
Subpath import: @dryui/ui/rating
Props: value (number), default 0, bindable | max (number) | disabled (boolean) | readonly (boolean) | allowHalf (boolean) | onValueChange ((value: number) => void) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Data attributes: data-disabled, data-highlighted, data-readonly, data-state
Example: <Rating bind:value={score} />

### TimeInput
Native time input with form control integration.
Import: @dryui/ui
Subpath import: @dryui/ui/time-input
Props: value (string), default '', bindable | disabled (boolean) | step (number)
Data attributes: data-disabled, data-theme
Example: <TimeInput>Content</TimeInput>

### TagsInput
Input for managing a list of tags.
Import: @dryui/ui
Subpath import: @dryui/ui/tags-input
Parts: Root, Input, Tag, TagDelete, List
Props: Root: value (string[]), default [], bindable | maxTags (number) | allowDuplicates (boolean) | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | onValueChange ((value: string[]) => void) | children (Snippet), required | Input: placeholder (string) | Tag: index (number), required | value (string), required, bindable | children (Snippet) | TagDelete: index (number), required | value (string) | List: children (Snippet), required
Data attributes: data-disabled
Example: <TagsInput.Root>

### FileUpload
File selection with drag-and-drop dropzone.
Import: @dryui/ui
Subpath import: @dryui/ui/file-upload
Parts: Root, Dropzone, Trigger, List, Item, ItemDelete
Props: Root: files (File[]), default [], bindable | accept (string) | multiple (boolean) | maxSize (number) | maxFiles (number) | disabled (boolean) | onFilesChange ((files: File[]) => void) | children (Snippet), required | Dropzone: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | Trigger: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | List: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet<[{ file: File; index: number }]>), required | Item: file (File), required | index (number), required | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet) | ItemDelete: index (number), required | children (Snippet)
Data attributes: data-disabled, data-dragging
Example: <FileUpload.Root>

### ColorPicker
Color selection with area, hue/alpha sliders, and eyedropper.
Import: @dryui/ui
Subpath import: @dryui/ui/color-picker
Parts: Root, Area, HueSlider, AlphaSlider, Input, Swatch, EyeDropper
Props: Root: value (string), default '#ff0000', bindable | alpha (number), default 1, bindable | disabled (boolean) | children (Snippet), required | Area: width (number), default 200 | height (number), default 150 | Input: format ('hex' | 'rgb' | 'hsl'), accepted hex, rgb, hsl, default 'hex' | Swatch: color (string)
Data attributes: data-disabled
Example: <ColorPicker.Root>

### Transfer
Dual-list transfer component for moving items between lists.
Import: @dryui/ui
Subpath import: @dryui/ui/transfer
Parts: Root, List, Item, Actions
Props: Root: sourceItems (TransferItemType[]), default [], required, bindable | targetItems (TransferItemType[]), default [], bindable | onChange ((source: TransferItemType[], target: TransferItemType[]) => void), default () => { | children (Snippet), required | List: type ('source' | 'target'), accepted source, target, required | title (string) | filterable (boolean), default false | content (Snippet<[{ items: TransferItemType[] }]>) | Item: key (string), required | type ('source' | 'target'), accepted source, target, required | disabled (boolean) | children (Snippet), required | Actions: children (Snippet<[{) | moveToTarget (() => void), required | moveToSource (() => void), required | moveAllToTarget (() => void), required | moveAllToSource (() => void), required | canMoveToTarget (boolean), required | canMoveToSource (boolean), required
Data attributes: data-disabled, data-selected, data-transfer-count, data-transfer-item, data-transfer-list-content, data-transfer-list-header, data-transfer-select-all
Example: <Transfer.Root>

### RichTextEditor
Basic rich text editor with formatting toolbar.
Import: @dryui/ui
Subpath import: @dryui/ui/rich-text-editor
Parts: Root, Toolbar, Content
Props: Root: value (string), default '', bindable | placeholder (string) | readonly (boolean) | children (Snippet), required
Data attributes: data-active, data-readonly
Example: <RichTextEditor.Root>

### PhoneInput
Phone number input with country code selector.
Import: @dryui/ui
Subpath import: @dryui/ui/phone-input
Props: value (string), default '', bindable | defaultCountry (string) | disabled (boolean) | name (string) | placeholder (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | countries (CountryInfo[]) | onchange ((value: string) => void)
Data attributes: data-disabled, data-part
Example: <PhoneInput bind:value={phone} defaultCountry="US" placeholder="(555) 123-4567" />

### CountrySelect
Country selector dropdown with flags and dial codes.
Import: @dryui/ui
Subpath import: @dryui/ui/country-select
Props: value (string), default '', bindable | regions (string[]) | showDialCode (boolean) | disabled (boolean) | placeholder (string) | name (string) | onchange ((code: string) => void) | children (Snippet)
Data attributes: data-part, data-selected, data-theme
Example: <CountrySelect bind:value={country} placeholder="Select country" />

### DateTimeInput
Combined date and time input with locale-aware segments.
Import: @dryui/ui
Subpath import: @dryui/ui/date-time-input
Props: value (Date), default $bindable(new Date()), bindable | min (Date) | max (Date) | disabled (boolean), default false | locale (string), default 'en-US' | name (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Data attributes: data-part
Example: <DateTimeInput bind:value={appointmentDate} name="appointment" />

### Category: Form

### Label
Form label with size variants.
Import: @dryui/ui
Subpath import: @dryui/ui/label
Props: children (Snippet), required | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md'
Data attributes: data-disabled, data-required
Example: <Label>Content</Label>

### Field
Form field wrapper with label, description, and error.
Import: @dryui/ui
Subpath import: @dryui/ui/field
Parts: Root, Description, Error
Props: Root: children (Snippet), required | error (string) | required (boolean) | disabled (boolean) | Description: children (Snippet), required | Error: children (Snippet), required
Data attributes: data-disabled, data-error
Example: <Field.Root>

### Fieldset
Structured field grouping with legend, description, and content.
Import: @dryui/ui
Subpath import: @dryui/ui/fieldset
Parts: Root, Legend, Description, Content
Props: Root: children (Snippet), required | Legend: children (Snippet), required | Description: children (Snippet), required | Content: children (Snippet), required
Example: <Fieldset.Root>

### Select
Closed dropdown select for choosing one option from a fixed list.
Import: @dryui/ui
Subpath import: @dryui/ui/select
Parts: Root, Trigger, Content, Item, Value
Props: Root: open (boolean), default false, bindable | value (string), default '', bindable | disabled (boolean) | name (string), Adds a hidden input so the selected value participates in native form submission. | children (Snippet), required | Trigger: children (Snippet), required | Content: offset (number) | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required | Value: placeholder (string)
Data attributes: data-disabled, data-invalid, data-placeholder, data-state
Example: <Select.Root bind:value={selected} bind:open={selectOpen} name="selection">

### SegmentedControl
Compact segmented switch for mutually exclusive options.
Import: @dryui/ui
Subpath import: @dryui/ui/segmented-control
Parts: Root, Item
Props: Root: value (string), default '', bindable | disabled (boolean), default false | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-state
Example: <SegmentedControl.Root bind:value={tripType}>

### Combobox
Searchable text input with filterable dropdown suggestions.
Import: @dryui/ui
Subpath import: @dryui/ui/combobox
Parts: Root, Input, Content, Item, Empty, Group
Props: Root: open (boolean), default false, bindable | value (string), default '', bindable | disabled (boolean) | name (string), Adds a hidden input so the selected value participates in native form submission. | children (Snippet), required | Input: placeholder (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | Content: offset (number) | loading (boolean) | loadingContent (Snippet) | children (Snippet), required | Item: value (string), required | index (number), required | disabled (boolean) | icon (Snippet) | children (Snippet), required | Empty: children (Snippet), required | Group: label (string), required | children (Snippet), required
Data attributes: data-disabled, data-highlighted, data-invalid, data-part, data-state
Example: <Combobox.Root bind:value={selectedFramework} name="framework">

### DateField
Form-first locale-aware segmented date input.
Import: @dryui/ui
Subpath import: @dryui/ui/date-field
Parts: Root, Segment, Separator
Props: Root: value (Date | null), default $bindable<Date | null>(null), bindable | name (string), Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD. | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | Segment: type (DateSegmentType), required | Separator: separator (string)
Data attributes: data-disabled, data-invalid, data-placeholder
Example: <DateField.Root bind:value={departureDate} name="departureDate">

### DatePicker
Calendar popup date picker with locale support.
Import: @dryui/ui
Subpath import: @dryui/ui/date-picker
Parts: Root, Trigger, Content, Calendar
Props: Root: open (boolean), bindable | value (Date | null), bindable | name (string), Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD. | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required | Trigger: size ('sm' | 'md' | 'lg'), accepted sm, md, lg | placeholder (string) | children (Snippet) | Content: offset (number) | children (Snippet), required
Data attributes: data-disabled, data-invalid, data-outside-month, data-placeholder, data-selected, data-theme, data-today
Example: <DatePicker.Root bind:value={departureDate} name="departureDate">

### Calendar
Interactive calendar grid for date navigation.
Import: @dryui/ui
Subpath import: @dryui/ui/calendar
Parts: Root, Header, Grid, Prev, Next, Heading
Props: Root: value (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required | Header: children (Snippet) | Prev: children (Snippet) | Next: children (Snippet)
Data attributes: data-disabled, data-in-range, data-outside-month, data-range-end, data-range-start, data-selected, data-theme, data-today
Example: <Calendar.Root>

### DateRangePicker
Date range selection with calendar popup.
Import: @dryui/ui
Subpath import: @dryui/ui/date-range-picker
Parts: Root, Trigger, Content, Calendar, Preset
Props: Root: open (boolean), default false, bindable | startDate (Date | null), default $bindable<Date | null>(null), bindable | endDate (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required | Trigger: placeholder (string) | children (Snippet | undefined) | Content: placement ('top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'), accepted top, top-start, top-end, bottom, bottom-start, bottom-end | offset (number) | children (Snippet), required | Preset: startDate (Date), required | endDate (Date), required | children (Snippet), required
Data attributes: data-disabled, data-in-range, data-outside-month, data-placeholder, data-range-end, data-range-start, data-selected, data-theme, data-today
Example: <DateRangePicker.Root>

### RangeCalendar
Calendar for selecting date ranges.
Import: @dryui/ui
Subpath import: @dryui/ui/range-calendar
Parts: Root, Grid
Props: Root: startDate (Date | null), default $bindable<Date | null>(null), bindable | endDate (Date | null), default $bindable<Date | null>(null), bindable | locale (string) | min (Date | null) | max (Date | null) | disabled (boolean) | children (Snippet), required
Data attributes: data-disabled, data-in-range, data-outside-month, data-range-end, data-range-start, data-selected, data-theme, data-today
Example: <RangeCalendar.Root>

### Category: Layout

### Container
Centered content container with max-width.
Import: @dryui/ui
Subpath import: @dryui/ui/container
Props: size ('sm' | 'md' | 'lg' | 'xl' | 'full'), accepted sm, md, lg, xl, full, default 'lg', Preset container width, not an arbitrary CSS length. | padding (boolean), default true | children (Snippet), required
Example: <Container>

### Stack
Vertical or horizontal stack layout with predictable spacing.
Import: @dryui/ui
Subpath import: @dryui/ui/stack
Props: direction ('vertical' | 'horizontal' | 'row' | 'column'), accepted vertical, horizontal, row, column, default 'vertical', Controls whether items stack vertically or horizontally. Also accepts row and column aliases. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | align ('start' | 'center' | 'end' | 'stretch'), accepted start, center, end, stretch, default 'stretch', Maps to align-items for the stack container. | children (Snippet), required
Example: <Stack direction="row" gap="md">

### Grid
CSS grid layout with uniform column control.
Import: @dryui/ui
Subpath import: @dryui/ui/grid
Props: columns (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12), accepted 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, default 12, Fixed integer column count for evenly sized columns. Use template when you need uneven widths. | template (string), Custom CSS grid-template-columns value for uneven or mixed-width columns. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | align ('start' | 'center' | 'end' | 'stretch'), accepted start, center, end, stretch, default 'stretch', Maps to align-items for the grid container. | children (Snippet), required
Example: <Grid template="minmax(0, 2fr) minmax(18rem, 1fr)" gap="lg">

### Flex
Flexbox layout container.
Import: @dryui/ui
Subpath import: @dryui/ui/flex
Props: direction ('row' | 'column' | 'row-reverse' | 'column-reverse'), accepted row, column, row-reverse, column-reverse, default 'row', Maps to flex-direction. | wrap ('nowrap' | 'wrap' | 'wrap-reverse'), accepted nowrap, wrap, wrap-reverse, default 'nowrap', Maps to flex-wrap. | gap ('sm' | 'md' | 'lg' | 'xl'), accepted sm, md, lg, xl, default 'md', Uses DryUI spacing scale tokens, not raw CSS units. | justify ('start' | 'center' | 'end' | 'between' | 'around' | 'evenly'), accepted start, center, end, between, around, evenly, default 'start', Maps to justify-content. | align ('start' | 'center' | 'end' | 'stretch' | 'baseline'), accepted start, center, end, stretch, baseline, default 'stretch', Maps to align-items. | children (Snippet), required
Example: <Flex justify="between" align="center">

### Separator
Visual divider between content.
Import: @dryui/ui
Subpath import: @dryui/ui/separator
Props: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | decorative (boolean), default true
Example: <Separator />

### Spacer
Empty space component for spacing.
Import: @dryui/ui
Subpath import: @dryui/ui/spacer
Props: size ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'), accepted xs, sm, md, lg, xl, 2xl, default 'md' | axis ('vertical' | 'horizontal'), accepted vertical, horizontal, default 'vertical'
Example: <Spacer size="lg" />

### AspectRatio
Constrains child content to a specific aspect ratio.
Import: @dryui/ui
Subpath import: @dryui/ui/aspect-ratio
Props: ratio (number), default 16 / 9 | children (Snippet), required
Example: <AspectRatio>Content</AspectRatio>

### PageLayout
Responsive app-shell layout with header, sidebar, content, and aside regions.
Import: @dryui/ui
Subpath import: @dryui/ui/page-layout
Parts: Root, Header, Sidebar, Content, Aside
Props: Root: fullHeight (boolean), default false | children (Snippet), required | Header: sticky (boolean), default false | children (Snippet), required | Sidebar: sticky (boolean), default false | children (Snippet), required | Content: children (Snippet), required | Aside: sticky (boolean), default false | children (Snippet), required
Data attributes: data-full-height, data-region, data-sticky, data-theme
Example: <PageLayout.Root fullHeight>

### ScrollArea
Custom scrollable area with styled scrollbars.
Import: @dryui/ui
Subpath import: @dryui/ui/scroll-area
Props: orientation ('vertical' | 'horizontal' | 'both'), accepted vertical, horizontal, both | children (Snippet), required
Example: <ScrollArea>Content</ScrollArea>

### Splitter
Resizable split panels with drag handle.
Import: @dryui/ui
Subpath import: @dryui/ui/splitter
Parts: Root, Panel, Handle
Props: Root: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | sizes (number[]), default $bindable([50 | children (Snippet), required | Panel: index (number), required | children (Snippet), required | Handle: index (number), required | children (Snippet)
Data attributes: data-orientation
Example: <Splitter.Root>

### WaveDivider
Decorative SVG section divider with wave, curve, angle, or zigzag shapes.
Import: @dryui/ui
Subpath import: @dryui/ui/wave-divider
Data attributes: data-theme
Example: <WaveDivider shape="wave" color="var(--dry-color-primary)" height={48} />

### Category: Navigation

### Tabs
Tabbed content navigation.
Import: @dryui/ui
Subpath import: @dryui/ui/tabs
Parts: Root, List, Trigger, Content
Props: Root: value (string), default '' | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | activationMode ('automatic' | 'manual'), accepted automatic, manual | children (Snippet), required | List: children (Snippet), required | Trigger: value (string), required | disabled (boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | children (Snippet), required | Content: value (string), required | children (Snippet), required
Data attributes: data-disabled, data-orientation, data-state
Example: <Tabs.Root bind:value={activeTab}>

### Breadcrumb
Navigation trail showing page hierarchy.
Import: @dryui/ui
Subpath import: @dryui/ui/breadcrumb
Parts: Root, List, Item, Link, Separator
Props: Root: children (Snippet), required | List: children (Snippet), required | Item: children (Snippet), required | Link: href (string) | current (boolean), default false | children (Snippet), required | Separator: children (Snippet)
Example: <Breadcrumb.Root>

### Pagination
Page navigation with previous/next and page links.
Import: @dryui/ui
Subpath import: @dryui/ui/pagination
Parts: Root, Content, Item, Previous, Next, Link, Ellipsis
Props: Root: page (number), default 1 | totalPages (number), required | children (Snippet), required | Content: children (Snippet), required | Item: children (Snippet), required | Previous: children (Snippet), required | Next: children (Snippet), required | Link: page (number), required | children (Snippet), required
Data attributes: data-state
Example: <Pagination.Root>

### Stepper
Step-by-step progress indicator.
Import: @dryui/ui
Subpath import: @dryui/ui/stepper
Parts: Root, List, Step, Separator
Props: Root: activeStep (number), default 0, bindable, Bindable current step index for controlled multi-step flows. | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required | List: children (Snippet), required | Step: step (number), required | clickable (boolean) | error (boolean) | onclick ((index: number) => void) | children (Snippet), required | Separator: step (number), required
Data attributes: data-orientation, data-part, data-state
Example: <Stepper.Root bind:activeStep={activeStep}>

### Toolbar
Horizontal button group for actions.
Import: @dryui/ui
Subpath import: @dryui/ui/toolbar
Parts: Root, Button, Separator, Link
Props: Root: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required | Button: disabled (boolean) | children (Snippet), required | Link: href (string), required | children (Snippet), required
Data attributes: data-disabled, data-orientation
Example: <Toolbar.Root>

### Menubar
Horizontal menu bar with dropdown menus.
Import: @dryui/ui
Subpath import: @dryui/ui/menubar
Parts: Root, Menu, Trigger, Content, Item, Separator, Label
Props: Root: children (Snippet), required | Menu: children (Snippet), required | Trigger: children (Snippet), required | Content: placement ('bottom' | 'bottom-start' | 'bottom-end'), accepted bottom, bottom-start, bottom-end | offset (number) | children (Snippet), required | Item: disabled (boolean) | onSelect (() => void) | children (Snippet), required | Label: children (Snippet), required
Data attributes: data-disabled, data-state, data-theme
Example: <Menubar.Root>

### AppBar
Top application bar with title and actions.
Import: @dryui/ui
Subpath import: @dryui/ui/app-bar
Parts: Root, Title
Props: Root: position ('static' | 'fixed' | 'sticky'), accepted static, fixed, sticky, default 'static' | children (Snippet), required | Title: children (Snippet), required
Data attributes: data-position, data-theme
Example: <AppBar.Root>

### PageHeader
Structured page header with title, meta, and actions.
Import: @dryui/ui
Subpath import: @dryui/ui/page-header
Parts: Root, Content, Actions, Eyebrow, Title, Description, Meta
Props: Root: children (Snippet), required | Content: children (Snippet), required | Actions: children (Snippet) | Eyebrow: children (Snippet), required | Title: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 2 | children (Snippet), required | Description: children (Snippet), required | Meta: children (Snippet), required
Data attributes: data-theme
Example: <PageHeader.Root>

### Navbar
Responsive navigation bar with mobile toggle.
Import: @dryui/ui
Subpath import: @dryui/ui/navbar
Parts: Root, Brand, Content, Item, Toggle
Props: Root: children (Snippet), required | Brand: children (Snippet), required | Content: children (Snippet), required | Item: active (boolean) | children (Snippet), required | Toggle: children (Snippet)
Data attributes: data-active, data-menu-open
Example: <Navbar.Root>

### NavigationMenu
Site-level navigation with flyout content panels.
Import: @dryui/ui
Subpath import: @dryui/ui/navigation-menu
Parts: Root, List, Item, Trigger, Content, Link
Props: Root: children (Snippet), required | List: children (Snippet), required | Item: children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required | Link: active (boolean), default false | children (Snippet), required
Data attributes: data-active, data-state, data-theme
Example: <NavigationMenu.Root>

### Sidebar
Collapsible side navigation panel.
Import: @dryui/ui
Subpath import: @dryui/ui/sidebar
Parts: Root, Header, Content, Footer, Group, GroupLabel, Item, Trigger
Props: Root: collapsed (boolean), default false, bindable | side ('left' | 'right'), accepted left, right, default 'left' | children (Snippet), required | Header: children (Snippet), required | Content: children (Snippet), required | Footer: children (Snippet), required | Group: children (Snippet), required | GroupLabel: children (Snippet), required | Item: active (boolean), default false | children (Snippet), required | Trigger: children (Snippet)
Data attributes: data-active, data-side, data-state, data-theme
Example: <Sidebar.Root>

### TableOfContents
Auto-generated table of contents from headings.
Import: @dryui/ui
Subpath import: @dryui/ui/table-of-contents
Parts: Root, List, Item
Props: Root: selector (string), default 'main' | headingSelector (string), default 'h2 | rootMargin (string), default '0px 0px -80% 0px' | autoId (boolean), default true | children (Snippet), required | Item: heading (import('@dryui/primitives').TocHeading), required | children (Snippet<[{ heading: import('@dryui/primitives').TocHeading; active: boolean }]>)
Data attributes: data-active, data-level, data-theme
Example: <TableOfContents.Root>

### Link
Styled anchor with external and disabled states.
Import: @dryui/ui
Subpath import: @dryui/ui/link
Props: external (boolean), default false | disabled (boolean), default false | underline ('always' | 'hover' | 'none'), accepted always, hover, none, default 'hover' | children (Snippet), required
Data attributes: data-disabled, data-theme, data-underline
Example: <Link>Content</Link>

### MegaMenu
Horizontal navigation with large dropdown panels and columns.
Import: @dryui/ui
Subpath import: @dryui/ui/mega-menu
Parts: Root, Item, Trigger, Panel, Column, Link
Props: Root: children (Snippet), required | Item: children (Snippet), required | Trigger: children (Snippet), required | Panel: fullWidth (boolean) | children (Snippet), required | Column: title (string) | children (Snippet), required | Link: icon (Snippet) | description (Snippet) | children (Snippet), required
Data attributes: data-active, data-full-width, data-part, data-theme
Example: <MegaMenu.Root>

### Category: Overlay

### Dialog
Modal dialog using native dialog element.
Import: @dryui/ui
Subpath import: @dryui/ui/dialog
Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Close
Props: Root: open (boolean), default false | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required | Header: children (Snippet), required | Body: children (Snippet), required | Footer: children (Snippet), required | Close: children (Snippet), required
Data attributes: data-state
Example: <Dialog.Root bind:open={showDialog}>

### AlertDialog
Modal dialog requiring user confirmation.
Import: @dryui/ui
Subpath import: @dryui/ui/alert-dialog
Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Action, Cancel
Props: Root: open (boolean), default false | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required | Header: children (Snippet), required | Body: children (Snippet), required | Footer: children (Snippet), required | Action: children (Snippet), required | Cancel: children (Snippet), required
Data attributes: data-state
Example: <AlertDialog.Root>

### Drawer
Slide-in panel from any edge.
Import: @dryui/ui
Subpath import: @dryui/ui/drawer
Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Close
Props: Root: open (boolean), default false | side ('top' | 'right' | 'bottom' | 'left'), accepted top, right, bottom, left, default 'right' | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required | Header: children (Snippet), required | Body: children (Snippet), required | Footer: children (Snippet), required | Close: children (Snippet), required
Data attributes: data-side, data-state
Example: <Drawer.Root bind:open={drawerOpen}>

### Popover
Floating content panel anchored to a trigger.
Import: @dryui/ui
Subpath import: @dryui/ui/popover
Parts: Root, Trigger, Content
Props: Root: open (boolean), default false, bindable | children (Snippet), required | Trigger: children (Snippet), required | Content: offset (number) | children (Snippet), required
Example: <Popover.Root bind:open={popoverOpen}>

### Tooltip
Hover/focus popup with descriptive text.
Import: @dryui/ui
Subpath import: @dryui/ui/tooltip
Parts: Root, Trigger, Content
Props: Root: openDelay (number) | closeDelay (number) | children (Snippet), required | Trigger: children (Snippet), required | Content: offset (number) | children (Snippet), required
Example: <Tooltip.Root>

### DropdownMenu
Trigger-activated dropdown with menu items.
Import: @dryui/ui
Subpath import: @dryui/ui/dropdown-menu
Parts: Root, Trigger, Content, Item, Separator, Group, Label
Props: Root: open (boolean), default false | children (Snippet), required | Trigger: children (Snippet), required | Content: offset (number) | children (Snippet), required | Item: disabled (boolean) | children (Snippet), required | Group: children (Snippet), required | Label: children (Snippet), required
Data attributes: data-disabled
Example: <DropdownMenu.Root>

### ContextMenu
Right-click menu with actions.
Import: @dryui/ui
Subpath import: @dryui/ui/context-menu
Parts: Root, Trigger, Content, Item, Separator, Group, Label
Props: Root: open (boolean), default false | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required | Item: disabled (boolean) | children (Snippet), required | Group: children (Snippet), required | Label: children (Snippet), required
Data attributes: data-disabled
Example: <ContextMenu.Root>

### CommandPalette
Searchable command menu dialog.
Import: @dryui/ui
Subpath import: @dryui/ui/command-palette
Parts: Root, Input, List, Group, Item, Empty, Separator
Props: Root: open (boolean), default false | children (Snippet), required | Input: placeholder (string) | List: children (Snippet), required | Group: heading (string) | children (Snippet), required | Item: value (string), required | disabled (boolean) | onSelect (() => void) | children (Snippet), required | Empty: children (Snippet), required
Data attributes: data-active, data-disabled, data-state
Example: <CommandPalette.Root>

### LinkPreview
Link preview popup on hover.
Import: @dryui/ui
Subpath import: @dryui/ui/link-preview
Parts: Root, Trigger, Content
Props: Root: open (boolean), default false, bindable | openDelay (number), default 700 | closeDelay (number), default 300 | children (Snippet), required | Trigger: children (Snippet), required | Content: offset (number) | children (Snippet), required
Data attributes: data-theme
Example: <LinkPreview.Root>

### Tour
Step-by-step guided tour overlay with spotlight.
Import: @dryui/ui
Subpath import: @dryui/ui/tour
Parts: Root, Tooltip
Props: Root: steps (TourStep[]), required | active (boolean), default false, bindable | onComplete (() => void) | onSkip (() => void) | children (Snippet), required | Tooltip: children (Snippet<[TooltipSnippetParams]>)
Data attributes: data-placement, data-tour-overlay, data-tour-spotlight
Example: <Tour.Root>

### Backdrop
Full-screen overlay behind modals and dialogs.
Import: @dryui/ui
Subpath import: @dryui/ui/backdrop
Props: open (boolean) | invisible (boolean)
Data attributes: data-invisible, data-theme
Example: <Backdrop>Content</Backdrop>

### HoverCard
Card popup on hover with delay-based open/close.
Import: @dryui/ui
Subpath import: @dryui/ui/hover-card
Parts: Root, Trigger, Content
Props: Root: openDelay (number) | closeDelay (number) | children (Snippet), required | Trigger: href (string) | children (Snippet), required | Content: offset (number) | children (Snippet), required
Example: <HoverCard.Root>

### NotificationCenter
Notification panel with trigger, groups, and items.
Import: @dryui/ui
Subpath import: @dryui/ui/notification-center
Parts: Root, Trigger, Panel, Item, Group
Props: Root: items (import('@dryui/primitives').NotificationItem[]), default [], bindable | open (boolean), default false, bindable | children (Snippet), required | Trigger: children (Snippet<[{ unreadCount: number }]>), required | Panel: offset (number) | children (Snippet), required | Item: id (string), required | read (boolean) | timestamp (Date) | variant ('info' | 'warning' | 'critical'), accepted info, warning, critical | action (Snippet) | children (Snippet), required | Group: label (string), required | children (Snippet), required
Data attributes: data-part, data-state, data-theme, data-variant
Example: <NotificationCenter.Root bind:items={notifications} bind:open={panelOpen}>

### Category: Display

### Card
Contained content surface with header/content/footer sections.
Import: @dryui/ui
Subpath import: @dryui/ui/card
Parts: Root, Header, Content, Footer
Props: Root: as ('div' | 'a' | 'button'), accepted div, a, button | selected (boolean) | orientation ('vertical' | 'horizontal'), accepted vertical, horizontal | variant ('default' | 'elevated' | 'interactive'), accepted default, elevated, interactive, default 'default' | size ('default' | 'sm'), accepted default, sm, default 'default' | children (Snippet), required | Header: children (Snippet), required | Content: children (Snippet), required | Footer: children (Snippet), required
Data attributes: data-orientation, data-part, data-selected
Example: <Card.Root>

### Accordion
Collapsible content sections, single or multiple mode.
Import: @dryui/ui
Subpath import: @dryui/ui/accordion
Parts: Root, Item, Trigger, Content
Props: Root: type ('single' | 'multiple'), accepted single, multiple | value (string[]), default [] | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | children (Snippet), required | Item: value (string), required | disabled (boolean) | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required
Data attributes: data-disabled, data-state
Example: <Accordion.Root>

### Collapsible
Expandable/collapsible content panel.
Import: @dryui/ui
Subpath import: @dryui/ui/collapsible
Parts: Root, Trigger, Content
Props: Root: open (boolean), default false | disabled (boolean), default false | children (Snippet), required | Trigger: children (Snippet), required | Content: children (Snippet), required
Data attributes: data-disabled, data-state
Example: <Collapsible.Root>

### Table
Data table with header, body, footer sections.
Import: @dryui/ui
Subpath import: @dryui/ui/table
Parts: Root, Header, Body, Footer, Row, Head, Cell, Caption
Props: Root: children (Snippet), required | Header: children (Snippet), required | Body: children (Snippet), required | Footer: children (Snippet), required | Row: children (Snippet), required | Head: scope ('col' | 'row'), accepted col, row | children (Snippet), required | Cell: children (Snippet), required | Caption: children (Snippet), required
Example: <Table.Root>

### Avatar
User profile image with fallback initials.
Import: @dryui/ui
Subpath import: @dryui/ui/avatar
Props: src (string) | alt (string) | fallback (string) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | shape ('circle' | 'square'), accepted circle, square, default 'circle' | status ('online' | 'offline' | 'busy' | 'away'), accepted online, offline, busy, away | badge (Snippet) | children (Snippet)
Data attributes: data-part, data-status, data-theme
Example: <Avatar src="/avatar.jpg" alt="Jane" fallback="JD" />

### AvatarGroup
Overlapping avatar stack with overflow indicator.
Import: @dryui/ui
Subpath import: @dryui/ui/avatar-group
Props: count (number), default 0 | maxVisible (number), default 4 | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | overlap ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | status ('online' | 'offline' | 'busy' | 'away'), accepted online, offline, busy, away | label (string), default 'Avatar group' | children (Snippet), required
Data attributes: data-part
Example: <AvatarGroup count={5} maxVisible={4} label="Trip attendees">

### Badge
Small status indicator label.
Import: @dryui/ui
Subpath import: @dryui/ui/badge
Props: variant ('solid' | 'outline' | 'soft' | 'dot'), accepted solid, outline, soft, dot, default 'soft' | color (BadgeColor), default 'gray' | size ('sm' | 'md'), accepted sm, md, default 'sm' | children (Snippet) | pulse (boolean) | icon (Snippet)
Data attributes: data-pulse
Example: <Badge variant="soft">Active</Badge>

### Chart
SVG-based chart with bars, lines, and axes.
Import: @dryui/ui
Subpath import: @dryui/ui/chart
Parts: Root, Bars, Line, Area, Donut, StackedBar, HorizontalBar, XAxis, YAxis
Props: Root: data (import('@dryui/primitives').ChartDataPoint[]), required | width (number) | height (number) | padding ({ top?: number; right?: number; bottom?: number; left?: number }) | children (Snippet), required | Bars: radius (number) | onclick ((event: { label: string; value: number; index: number }) => void) | Line: strokeWidth (number) | showDots (boolean) | dotRadius (number) | color (string) | Area: strokeWidth (number) | showDots (boolean) | dotRadius (number) | color (string) | Donut: innerRadius (number) | outerRadius (number) | label (Snippet<[{ total: number }]>) | onclick ((event: { label: string; value: number; index: number }) => void) | StackedBar: stackedData (import('@dryui/primitives').ChartStackedDataPoint[]), required | radius (number) | HorizontalBar: radius (number) | YAxis: ticks (number)
Data attributes: data-clickable, data-part, data-theme
Example: <Chart.Root>

### ChatMessage
Chat message bubble with avatar and timestamp.
Import: @dryui/ui
Subpath import: @dryui/ui/chat-message
Props: role ('user' | 'assistant' | 'system'), accepted user, assistant, system, default 'user' | variant ('sent' | 'received'), accepted sent, received | avatar (string) | name (string) | timestamp (string) | typing (boolean), default false | children (Snippet), required
Data attributes: data-part, data-role, data-theme, data-variant
Example: <ChatMessage>Content</ChatMessage>

### ChatThread
Conversation thread container with restart action and auto-scroll behavior.
Import: @dryui/ui
Subpath import: @dryui/ui/chat-thread
Props: messageCount (number), required | scrollKey (number), default 0 | children (Snippet<[), required | index (number), required | viewTransitionName (string), required | isLatest (boolean), required
Example: <ChatThread messageCount={messages.length}>

### TypingIndicator
Animated three-dot typing status indicator.
Import: @dryui/ui
Subpath import: @dryui/ui/typing-indicator
Example: <TypingIndicator aria-label="Assistant is typing" />

### Image
Image with loading states and fallback support.
Import: @dryui/ui
Subpath import: @dryui/ui/image
Props: fallback (string) | fallbackSnippet (Snippet)
Data attributes: data-state, data-theme
Example: <Image>Content</Image>

### Kbd
Keyboard shortcut display element.
Import: @dryui/ui
Subpath import: @dryui/ui/kbd
Props: keys (string[]) | children (Snippet)
Data attributes: data-theme
Example: <Kbd>Content</Kbd>

### List
Structured list with items, icons, and subheaders.
Import: @dryui/ui
Subpath import: @dryui/ui/list
Parts: Root, Item, ItemIcon, ItemText, Subheader
Props: Root: dense (boolean) | disablePadding (boolean) | children (Snippet), required | Item: interactive (boolean) | disabled (boolean) | children (Snippet), required | ItemIcon: children (Snippet), required | ItemText: primary (Snippet) | secondary (Snippet) | children (Snippet) | Subheader: children (Snippet), required
Data attributes: data-dense, data-disable-padding, data-disabled, data-interactive, data-list-item-primary, data-list-item-secondary, data-theme
Example: <List.Root>

### Timeline
Vertical timeline for activity feeds and history.
Import: @dryui/ui
Subpath import: @dryui/ui/timeline
Parts: Root, Item, Icon, Content, Title, Description, Time
Props: Root: orientation ('vertical' | 'horizontal'), accepted vertical, horizontal, default 'vertical' | children (Snippet), required | Item: children (Snippet), required | Icon: children (Snippet) | Content: children (Snippet), required | Title: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 3 | children (Snippet), required | Description: children (Snippet), required | Time: datetime (string) | children (Snippet), required
Data attributes: data-level, data-orientation, data-theme
Example: <Timeline.Root>

### Typography
Standalone semantic text exports: heading, text, code, blockquote.
Import: @dryui/ui
Subpath import: @dryui/ui/typography
Parts: Heading, Text, Code, Blockquote
Namespace parts only: no Root wrapper
Props: Heading: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6 | children (Snippet), required | Text: as ('p' | 'span' | 'div'), accepted p, span, div | color ('default' | 'muted' | 'secondary'), accepted default, muted, secondary, Use muted or secondary for supporting copy without reaching for inline color styles. | variant ('default' | 'muted' | 'secondary'), accepted default, muted, secondary | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, Applies DryUI text scale tokens for compact or emphasized body copy. | children (Snippet), required | Code: children (Snippet), required | Blockquote: children (Snippet), required
Data attributes: data-as, data-color, data-level, data-size, data-theme
Example: <Typography.Heading level={2}>Launch readiness</Typography.Heading>

### Heading
Standalone semantic heading export for starter-kit typography.
Import: @dryui/ui
Subpath import: @dryui/ui/heading
Props: level (1 | 2 | 3 | 4 | 5 | 6), accepted 1, 2, 3, 4, 5, 6, default 2 | children (Snippet), required
Data attributes: data-level
Example: <Heading level={2}>Launch readiness</Heading>

### Text
Standalone body copy export for starter-kit typography.
Import: @dryui/ui
Subpath import: @dryui/ui/text
Props: as ('p' | 'span' | 'div'), accepted p, span, div, default 'p' | color ('default' | 'muted' | 'secondary'), accepted default, muted, secondary, default 'default', Use muted or secondary for supporting copy without reaching for inline color styles. | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md', Applies DryUI text scale tokens for compact or emphasized body copy. | children (Snippet), required
Data attributes: data-as, data-color, data-size
Example: <Text as="p" color="secondary" size="sm">Use Text for supporting copy, labels, and starter-kit body content.</Text>

### DescriptionList
Responsive term and value list for summaries and specs.
Import: @dryui/ui
Subpath import: @dryui/ui/description-list
Parts: Root, Item, Term, Description
Props: Root: children (Snippet), required | Item: children (Snippet), required | Term: children (Snippet), required | Description: children (Snippet), required
Example: <DescriptionList.Root>

### User
User identity display with avatar, name, and description.
Import: @dryui/ui
Subpath import: @dryui/ui/user
Props: name (string), required | description (string) | avatar (UserAvatarConfig) | chip (UserChipConfig | boolean) | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal'
Data attributes: data-orientation, data-size
Example: <User name="Elena Rossi" description="Engineering Lead" avatar={{ fallback: "E" }} />

### Tag
Dismissible tag/chip label.
Import: @dryui/ui
Subpath import: @dryui/ui/tag
Props: variant ('solid' | 'outline' | 'soft'), accepted solid, outline, soft, default 'soft' | color (TagColor), default 'gray' | size ('sm' | 'md'), accepted sm, md, default 'sm' | dismissible (boolean) | onDismiss (() => void) | children (Snippet), required
Data attributes: data-theme
Example: <Tag dismissible ondismiss={handleDismiss}>Svelte</Tag>

### EmptyState
Placeholder for empty content areas.
Import: @dryui/ui
Subpath import: @dryui/ui/empty-state
Parts: Root, Icon, Title, Description, Action
Props: Root: children (Snippet), required | Icon: children (Snippet), required | Title: children (Snippet), required | Description: children (Snippet), required | Action: children (Snippet), required
Example: <EmptyState.Root>

### Marquee
Scrolling text/content ticker with CSS animations.
Import: @dryui/ui
Subpath import: @dryui/ui/marquee
Props: speed (number), default 50 | direction ('left' | 'right' | 'up' | 'down'), accepted left, right, up, down, default 'left' | pauseOnHover (boolean), default false | gap (string), default '1rem' | children (Snippet), required
Data attributes: data-direction, data-marquee-track, data-pause-on-hover
Example: <Marquee>Content</Marquee>

### QRCode
QR code generator using Canvas 2D API.
Import: @dryui/ui
Subpath import: @dryui/ui/qr-code
Props: value (string), required | size (number), default 200 | errorCorrection ('L' | 'M' | 'Q' | 'H'), accepted L, M, Q, H, default 'M' | fgColor (string), default '#000' | bgColor (string), default '#fff'
Example: <QRCode>Content</QRCode>

### CodeBlock
Code display with optional line numbers and copy button.
Import: @dryui/ui
Subpath import: @dryui/ui/code-block
Props: code (string), required | language (string) | showLineNumbers (boolean), default false | showCopyButton (boolean), default true | linkResolver ((text: string, type: string) => string | undefined) | children (Snippet)
Data attributes: data-language, data-single-line
Example: <CodeBlock>Content</CodeBlock>

### MarkdownRenderer
Renders markdown text as styled HTML.
Import: @dryui/ui
Subpath import: @dryui/ui/markdown-renderer
Props: content (string), required | sanitize (boolean), default true
Data attributes: data-code-block, data-markdown-renderer
Example: <MarkdownRenderer>Content</MarkdownRenderer>

### VirtualList
Renders only visible items from large lists for performance.
Import: @dryui/ui
Subpath import: @dryui/ui/virtual-list
Props: items (T[]), required | itemHeight (number | ((index: number) => number)), required | overscan (number) | children (Snippet<[{ item: T; index: number; style: string }]>), required
Example: <VirtualList>Content</VirtualList>

### InfiniteScroll
Loads more content when user scrolls near bottom.
Import: @dryui/ui
Subpath import: @dryui/ui/infinite-scroll
Props: onLoadMore (() => void | Promise<void>), required | hasMore (boolean), default true | loading (boolean), default false | rootMargin (string), default '200px' | children (Snippet), required | loadingIndicator (Snippet) | endMessage (Snippet)
Example: <InfiniteScroll>Content</InfiniteScroll>

### DataGrid
Enhanced table with sorting, filtering, and pagination.
Import: @dryui/ui
Subpath import: @dryui/ui/data-grid
Parts: Root, Table, Header, Column, Body, Row, Cell, Pagination, SelectAll, SelectCell, ExpandableRow, ExpandTrigger
Props: Root: items (T[]), required | pageSize (number) | striped (boolean), default false | selectable (boolean) | onSelectionChange ((selected: string[]) => void) | actionBar (Snippet<[{ selectedCount: number; clearSelection: () => void }]>) | children (Snippet), required | Table: children (Snippet), required | Header: children (Snippet), required | Column: key (string), required | sortable (boolean) | filterable (boolean) | pinned (boolean) | resizable (boolean) | header (Snippet) | children (Snippet), required | Body: children (Snippet<[{ items: T[]; page: number }]>), required | Row: rowId (string) | children (Snippet), required | Cell: children (Snippet), required | Pagination: children (Snippet<[{) | page (number), required | totalPages (number), required | totalItems (number), required | pageSize (number), required | canPrevious (boolean), required | canNext (boolean), required | previous (() => void), required | next (() => void), required | goto ((page: number) => void), required | SelectCell: rowId (string), required | ExpandableRow: rowId (string), required | expandable (Snippet), required | children (Snippet), required | ExpandTrigger: rowId (string), required | children (Snippet)
Data attributes: data-expanded, data-filter-input, data-pagination-info, data-pagination-next, data-pagination-prev, data-part, data-pinned, data-resizable, data-resizing, data-selected, data-sort-indicator, data-sort-trigger, data-sorted
Example: <DataGrid.Root>

### Carousel
Scrollable content carousel with slide navigation.
Import: @dryui/ui
Subpath import: @dryui/ui/carousel
Parts: Root, Viewport, Slide, Prev, Next, Dots, Thumbnails
Props: Root: orientation ('horizontal' | 'vertical'), accepted horizontal, vertical | loop (boolean) | autoplay (number | false) | children (Snippet), required | Viewport: children (Snippet), required | Slide: children (Snippet), required | Prev: children (Snippet) | Next: children (Snippet) | Thumbnails: position ('bottom' | 'left' | 'right'), accepted bottom, left, right | children (Snippet<[{ index: number; isActive: boolean; scrollTo: (index: number) => void }]>), required
Data attributes: data-active, data-orientation, data-position, data-theme
Example: <Carousel.Root>

### FormatBytes
Formats byte values with Intl.NumberFormat.
Import: @dryui/ui
Subpath import: @dryui/ui/format-bytes
Props: value (number), required | locale (string) | unit ('byte' | 'bit'), accepted byte, bit | display ('short' | 'long' | 'narrow'), accepted short, long, narrow
Data attributes: data-theme
Example: <FormatBytes>Content</FormatBytes>

### FormatDate
Formats dates with Intl.DateTimeFormat.
Import: @dryui/ui
Subpath import: @dryui/ui/format-date
Props: date (Date | string | number), required | locale (string) | weekday ('long' | 'short' | 'narrow'), accepted long, short, narrow | era ('long' | 'short' | 'narrow'), accepted long, short, narrow | year ('numeric' | '2-digit'), accepted numeric, 2-digit | month ('numeric' | '2-digit' | 'long' | 'short' | 'narrow'), accepted numeric, 2-digit, long, short, narrow | day ('numeric' | '2-digit'), accepted numeric, 2-digit | hour ('numeric' | '2-digit'), accepted numeric, 2-digit | minute ('numeric' | '2-digit'), accepted numeric, 2-digit | second ('numeric' | '2-digit'), accepted numeric, 2-digit | timeZoneName ('long' | 'short'), accepted long, short | timeZone (string) | hourCycle ('h11' | 'h12' | 'h23' | 'h24'), accepted h11, h12, h23, h24 | dateStyle ('full' | 'long' | 'medium' | 'short'), accepted full, long, medium, short | timeStyle ('full' | 'long' | 'medium' | 'short'), accepted full, long, medium, short
Data attributes: data-theme
Example: <FormatDate>Content</FormatDate>

### FormatNumber
Formats numbers with Intl.NumberFormat.
Import: @dryui/ui
Subpath import: @dryui/ui/format-number
Props: value (number), required | locale (string) | type ('decimal' | 'currency' | 'percent' | 'unit'), accepted decimal, currency, percent, unit | currency (string) | unit (string) | notation ('standard' | 'scientific' | 'engineering' | 'compact'), accepted standard, scientific, engineering, compact | minimumFractionDigits (number) | maximumFractionDigits (number) | minimumIntegerDigits (number) | minimumSignificantDigits (number) | maximumSignificantDigits (number)
Data attributes: data-theme
Example: <FormatNumber>Content</FormatNumber>

### ImageComparison
Before/after image comparison slider.
Import: @dryui/ui
Subpath import: @dryui/ui/image-comparison
Props: position (number), default 50, bindable | orientation ('horizontal' | 'vertical'), accepted horizontal, vertical, default 'horizontal' | before (Snippet), required | after (Snippet), required | handle (Snippet)
Data attributes: data-orientation
Example: <ImageComparison>Content</ImageComparison>

### StatCard
Metric card with label, value, and trend parts.
Import: @dryui/ui
Subpath import: @dryui/ui/stat-card
Parts: Root, Label, Value, Trend
Props: Root: tone ('neutral' | 'info' | 'success' | 'warning' | 'danger'), accepted neutral, info, success, warning, danger, default 'neutral' | density ('comfortable' | 'compact'), accepted comfortable, compact, default 'comfortable' | children (Snippet), required | Label: children (Snippet), required | Value: children (Snippet), required | Trend: direction ('up' | 'down' | 'flat'), accepted up, down, flat, default 'flat' | children (Snippet), required
Data attributes: data-direction
Example: <StatCard.Root tone="info">

### RelativeTime
Displays relative time with auto-updating.
Import: @dryui/ui
Subpath import: @dryui/ui/relative-time
Props: date (Date | string | number), required | locale (string) | updateInterval (number)
Data attributes: data-theme
Example: <RelativeTime>Content</RelativeTime>

### Tree
Hierarchical tree view with expand/collapse.
Import: @dryui/ui
Subpath import: @dryui/ui/tree
Parts: Root, Item, ItemLabel, ItemChildren
Props: Root: defaultExpanded (string[]) | selectedItem (string | null), default null, bindable | children (Snippet), required | Item: itemId (string), required | children (Snippet), required | ItemLabel: children (Snippet), required | ItemChildren: children (Snippet), required
Data attributes: data-selected, data-theme
Example: <Tree.Root>

### Gauge
SVG gauge indicator with configurable arc, thresholds, and label.
Import: @dryui/ui
Subpath import: @dryui/ui/gauge
Data attributes: data-part, data-theme
Example: <Gauge value={72} min={0} max={100} thresholds={[{ value: 30, color: "red" }, { value: 70, color: "orange" }, { value: 90, color: "green" }]} />

### Sparkline
Compact inline SVG sparkline chart.
Import: @dryui/ui
Subpath import: @dryui/ui/sparkline
Props: data (number[]), required | width (number) | height (number) | color (string) | filled (boolean) | strokeWidth (number) | highlightLast (boolean)
Data attributes: data-part, data-theme
Example: <Sparkline data={[5, 10, 3, 8, 12, 7]} width={120} height={30} />

### FlipCard
Flippable card with front and back faces.
Import: @dryui/ui
Subpath import: @dryui/ui/flip-card
Parts: Root, Front, Back
Props: Root: trigger ('hover' | 'click'), accepted hover, click | direction ('horizontal' | 'vertical'), accepted horizontal, vertical | flipped (boolean) | children (Snippet), required | Front: children (Snippet), required | Back: children (Snippet), required
Data attributes: data-direction, data-flipped, data-part
Example: <FlipCard.Root trigger="hover">

### LogoCloud
Grid of logos or brand icons with uniform sizing.
Import: @dryui/ui
Subpath import: @dryui/ui/logo-cloud
Parts: Root, Item
Props: Root: columns (number), default 5 | gap (string) | align ('start' | 'center' | 'end'), accepted start, center, end | children (Snippet), required | Item: href (string) | name (string) | children (Snippet), required
Example: <LogoCloud.Root columns={4}>

### VideoEmbed
Video player embed for YouTube, Vimeo, and native sources.
Import: @dryui/ui
Subpath import: @dryui/ui/video-embed
Props: src (string), required | poster (string) | title (string) | provider ('youtube' | 'vimeo' | 'native'), accepted youtube, vimeo, native | autoplay (boolean) | aspectRatio (string) | playButton (Snippet) | children (Snippet)
Data attributes: data-part
Example: <VideoEmbed src="https://youtube.com/watch?v=dQw4w9WgXcQ" provider="youtube" title="Video title" />

### SeatMap
Interactive seat selection grid with rows, seats, and legend.
Import: @dryui/ui
Subpath import: @dryui/ui/seat-map
Parts: Root, Row, Seat, Legend
Props: Root: selectedSeats (string[]) | maxSelections (number) | onSelectionChange ((seats: string[]) => void) | children (Snippet), required | Row: label (string), required | children (Snippet), required | Seat: id (string), required | status ('available' | 'occupied' | 'selected' | 'blocked'), accepted available, occupied, selected, blocked, required | tier (string) | price (number) | children (Snippet) | Legend: children (Snippet), required
Data attributes: data-part, data-status
Example: <SeatMap.Root selectedSeats={selected} onSelectionChange={(s) => selected = s}>

### Map
Interactive map container with markers, popups, layers, and controls.
Import: @dryui/ui
Subpath import: @dryui/ui/map
Parts: Root, Marker, Popup, Layer, Controls
Props: Root: center (LngLat) | zoom (number) | minZoom (number) | maxZoom (number) | mapStyle (string) | createMap ((container: HTMLDivElement, options: MapOptions) => MapInstance) | children (Snippet) | Marker: position (LngLat), required | color (string) | children (Snippet) | class (string) | Popup: maxWidth (string) | closeButton (boolean) | closeOnClick (boolean) | children (Snippet), required | class (string) | Layer: id (string), required | type ('heatmap' | 'polygon' | 'fill' | 'circle' | 'line'), accepted heatmap, polygon, fill, circle, line, required | data (GeoJsonData), required | color (string) | opacity (number) | Controls: position ('top-left' | 'top-right' | 'bottom-left' | 'bottom-right'), accepted top-left, top-right, bottom-left, bottom-right | navigation (boolean) | fullscreen (boolean) | children (Snippet)
Data attributes: data-part, data-theme
Example: <Map.Root center={[-122.4, 37.8]} zoom={12}>

### Category: Feedback

### Alert
Contextual feedback message with variant styling.
Import: @dryui/ui
Subpath import: @dryui/ui/alert
Parts: Root, Icon, Title, Description, Close
Props: Root: variant (AlertVariant), default 'info' | dismissible (boolean) | onDismiss (() => void) | children (Snippet), required | Icon: children (Snippet), required | Title: children (Snippet), required | Description: children (Snippet), required | Close: children (Snippet)
Example: <Alert.Root variant="info"><Alert.Description>Your changes have been saved.</Alert.Description></Alert.Root>

### Toast
Temporary notification message.
Import: @dryui/ui
Subpath import: @dryui/ui/toast
Parts: Provider, Root, Title, Description, Close, Action
Props: Provider: position ('top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'), accepted top-right, top-left, bottom-right, bottom-left, top-center, bottom-center, default 'bottom-right' | children (Snippet) | Root: id (string), required | variant ('info' | 'success' | 'warning' | 'error'), accepted info, success, warning, error | persistent (boolean) | progress (number) | children (Snippet), required | Title: children (Snippet), required | Description: children (Snippet), required | Close: children (Snippet), required | Action: children (Snippet), required | onclick (() => void)
Data attributes: data-part, data-persistent, data-position, data-removing, data-theme, data-variant
Example: <Toast.Root>

### Progress
Progress bar indicator.
Import: @dryui/ui
Subpath import: @dryui/ui/progress
Props: value (number) | max (number), default 100 | size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | color ('blue' | 'green' | 'red' | 'yellow'), accepted blue, green, red, yellow, default 'blue' | segments (ProgressSegment[]) | thresholds (ProgressThreshold[]) | showLabel (boolean | 'inside' | 'outside')
Data attributes: data-part, data-position, data-state
Example: <Progress value={65} max={100} />

### Skeleton
Loading placeholder animation.
Import: @dryui/ui
Subpath import: @dryui/ui/skeleton
Props: variant ('text' | 'circular' | 'rectangular'), accepted text, circular, rectangular, default 'text' | width (string) | height (string)
Example: <Skeleton width="200px" height="1rem" />

### Spinner
Loading spinner animation.
Import: @dryui/ui
Subpath import: @dryui/ui/spinner
Props: size ('sm' | 'md' | 'lg'), accepted sm, md, lg, default 'md' | color ('primary' | 'current'), accepted primary, current, default 'primary' | label (string)
Example: <Spinner size="md" />

### ProgressRing
Circular progress ring with SVG rendering.
Import: @dryui/ui
Subpath import: @dryui/ui/progress-ring
Props: value (number | undefined) | max (number), default 100 | size (number), default 40 | strokeWidth (number), default 4 | color ('primary' | 'gray' | 'green' | 'red' | 'yellow'), accepted primary, gray, green, red, yellow, default 'primary' | indeterminate (boolean), default false
Data attributes: data-part, data-state, data-theme
Example: <ProgressRing>Content</ProgressRing>

### Category: Interaction

### DragAndDrop
Reorderable list with drag and keyboard support.
Import: @dryui/ui
Subpath import: @dryui/ui/drag-and-drop
Parts: Root, Item, Handle
Props: Root: items (T[]), required | onReorder ((items: T[]) => void), required | orientation ('vertical' | 'horizontal'), accepted vertical, horizontal | children (Snippet), required | Item: index (number), required | children (Snippet<[{ isDragging: boolean; isOver: boolean }]>), required | Handle: index (number), required | children (Snippet)
Data attributes: data-dnd-grip, data-dragging, data-orientation, data-over
Example: <DragAndDrop.Root>

### Category: Utility

### Portal
Renders children into a different DOM location.
Import: @dryui/ui
Subpath import: @dryui/ui/portal
Props: target (string | HTMLElement) | disabled (boolean) | children (Snippet), required
Example: <Portal>Content</Portal>

### VisuallyHidden
Hides content visually but keeps it accessible to screen readers.
Import: @dryui/ui
Subpath import: @dryui/ui/visually-hidden
Props: children (Snippet), required
Example: <VisuallyHidden>Content</VisuallyHidden>

### FocusTrap
Traps keyboard focus within a container element.
Import: @dryui/ui
Subpath import: @dryui/ui/focus-trap
Props: active (boolean) | initialFocus (string) | returnFocus (boolean) | children (Snippet), required
Example: <FocusTrap>Content</FocusTrap>

### Hotkey
Keyboard shortcut handler with modifier support.
Import: @dryui/ui
Subpath import: @dryui/ui/hotkey
Example: <Hotkey>Content</Hotkey>

## CSS Variables

All components support CSS variable theming. Override at the :root level or component level:

```css
:root {
  --dry-btn-radius: 8px;
  --dry-btn-bg: #6366f1;
}
```

## CLI

Look up component info from the terminal:

```
bun run --filter '@dryui/cli' build
node packages/cli/dist/index.js info <component>
```

## MCP Server

dryui ships an MCP server for AI-agent integration:

```json
{
  "mcpServers": {
    "dryui": {
      "command": "bunx",
      "args": ["@dryui/mcp"]
    }
  }
}
```

Available MCP tools:
- review: Review Svelte components for DryUI spec compliance and best practices
- diagnose: Diagnose theme CSS for missing tokens, contrast issues, and value errors


## Composed outputs

dryui also ships 89 source-owned composed outputs across blocks, starters, and starter-kit assets.
Use the CLI or MCP `list` tool with composed-output filters to discover them, and `info` to inspect named variants and routes.