Interactive and composite bricks of @saas-design/ui: every recipe variant and every codegen showcase case, rendered from the generated React 19 / Svelte 5 parts.
Alert displays a static status or informational message.
Renders a live region with role=status by default; children carry the message body.
Alert
Alert renders a div with alert or status semantics.
defaults
Alert
variant.default
Alert
variant.destructive
Alert
variant.success
Alert
variant.warning
Alert
Prop
Type
Notes
Class
string
adds Tailwind utilities
Variant
string
default, destructive, or wireframe preset
Role
string
status or alert (defaults to status)
AriaLive
string
polite or assertive (defaults to polite)
Attrs
attrs
Children
children
ui.badge
Badge shows a short status label.
Badge uses variant and size presets.
Badge
Badge renders label text in a div wrapper.
defaults
Badge
size.sm
Badge
size.default
Badge
size.lg
Badge
variant.default
Badge
variant.secondary
Badge
variant.outline
Badge
variant.destructive
Badge
Prop
Type
Notes
Variant
string
color preset: default, secondary, destructive, outline
Size
string
density preset: default, sm, lg
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
ui.breadcrumb
Breadcrumb shows the current page location within a hierarchy.
Renders nav with ordered links and aria-current on the active item.
Breadcrumb
Breadcrumb renders the full navigation trail.
defaults
Prop
Type
Notes
Class
string
adds Tailwind utilities
Items
items
AriaLabel
string
DataUI8Kit
string
opt-in behavior hook; empty emits nothing
Attrs
attrs
ui.button-plain
ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
ButtonPlain
ButtonPlain is a bare button element: no styling beyond Class. Patterns (tabs, tree rows, menu items) style it themselves.
defaults
default
Prop
Type
Notes
Class
string
adds Tailwind utilities
Type
string
button type: button, submit, reset (ignored when Href is set)
Disabled
bool
blocks interaction
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
Children
children
ui.button
Button triggers an action on click.
Optional Href renders an anchor with button appearance (CTA navigation).
For exotic roots, use ButtonClasses (Templ/Svelte/Vue/Solid) or asChild (React).
Prefer Link for prose/semantic navigation.
Button
Button renders a button element, or an anchor when Href is set.
Type/Form apply only in button mode; Disabled on anchors uses aria-disabled.
explicit rel; external links default to noopener noreferrer (anchor mode)
External
bool
opens in a new tab with safe rel defaults (anchor mode)
Disabled
bool
blocks interaction
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
Children
children
ui.card
Card groups related content in one bordered surface.
Card uses header, content, and footer slots.
For semantic root elements (section, article), use CardClasses on a manual wrapper.
Card
Card renders the bordered surface wrapper.
defaults
Card
variant.default
Card
variant.muted
Card
variant.ghost
Card
variant.compact
Card
variant.raised
Card
variant.kpi
Card
variant.flat
Card
variant.accent
Card
Prop
Type
Notes
Class
string
adds Tailwind utilities
Variant
string
surface: default, muted, ghost, compact
Attrs
attrs
Children
children
CardHeader
CardHeader renders the top slot.
defaults
CardHeader
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
CardTitle
CardTitle renders heading text at the As level (default h2).
defaults
CardTitle
Prop
Type
Notes
Class
string
adds Tailwind utilities
As
int
maps to h1-h6 (default h2)
Attrs
attrs
Children
children
CardDescription
CardDescription renders a muted subtitle in a p element.
defaults
CardDescription
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
CardContent
CardContent renders the padded main body slot.
defaults
CardContent
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
CardFooter
CardFooter renders the bottom action slot.
defaults
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
ui.checkbox
Checkbox is a native boolean form control.
Wireframe styling via Variant and Size; supports standard ARIA attrs.
Checkbox
Checkbox renders a styled input[type=checkbox].
defaults
size.default
size.sm
variant.default
variant.ghost
state.checked
state.disabled
state.unchecked
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Value
string
Checked
bool
Disabled
bool
Required
bool
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
ui.form.controls
Form controls covers fieldset, legend, datalist, output, meter, and progress.
Fieldset
Fieldset renders a native fieldset.
defaults
size.default
size.lg
size.sm
variant.card
variant.default
variant.inline
status.progress
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Form
string
Disabled
bool
Attrs
attrs
Children
children
Legend
Legend renders a native legend.
defaults
size.sm
size.default
size.lg
variant.default
variant.muted
group.fieldset
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
DataList
DataList renders a native datalist.
defaults
Prop
Type
Notes
ID
string
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
DataOption
DataOption renders an option inside a datalist.
defaults
status.progress
Prop
Type
Notes
Value
string
Label
string
Attrs
attrs
Output
Output renders a native output element.
defaults
group.fieldset
status.progress
Prop
Type
Notes
ID
string
Class
string
adds Tailwind utilities
Name
string
For
string
Value
string
initial output text
Attrs
attrs
Children
children
Meter
Meter renders a native meter.
defaults
Meter
size.sm
Meter
size.default
Meter
size.lg
Meter
variant.default
Meter
variant.muted
Meter
group.fieldset
Meter
status.progress
Meter
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
ID
string
Class
string
adds Tailwind utilities
Value
string
Min
string
Max
string
Low
string
High
string
Optimum
string
Attrs
attrs
Children
children
Progress
Progress renders a native progress element.
defaults
size.sm
size.default
size.lg
variant.default
variant.muted
group.fieldset
status.progress
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
ID
string
Class
string
adds Tailwind utilities
Value
string
Max
string
Attrs
attrs
Children
children
ui.dialog
Dialog renders a native dialog root with an optional behavior hook.
The data-ui8kit hook defaults off; the registry ships no client JS.
Dialog
Dialog renders a native dialog element.
defaults
size.default
size.full
size.lg
size.xl
variant.card
variant.default
variant.sheet
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
ID
string
Open
bool
initial open state (static attribute only)
DataUI8Kit
string
opt-in behavior hook; empty emits nothing
AriaLabel
string
AriaLabelledBy
string
AriaDescribedBy
string
Attrs
attrs
Children
children
ui.disclosure
Disclosure renders native details and summary elements.
Open is a static attribute only — no controlled-state contract.
Disclosure
Disclosure renders native details.
defaults
Disclosure
variant.card
Disclosure
variant.default
Disclosure
variant.ghost
Disclosure
variant.item
Disclosure
state.open
Disclosure
Prop
Type
Notes
Variant
string
sets appearance preset
Class
string
adds Tailwind utilities
Open
bool
initial open state (static attribute only)
Name
string
group name: details of one name open one at a time (native exclusive accordion); leave out for independent items
Attrs
attrs
Children
children
Summary
Summary renders native summary, followed by a Lucide chevron-down indicator that turns over when the details open (CSS only: group-open:rotate-180 on the Disclosure group).
defaults
Summary
variant.card
Summary
variant.default
Summary
variant.ghost
Summary
variant.item
Summary
Prop
Type
Notes
Variant
string
sets appearance preset
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
ui.form
Form primitives: form wrapper, field item, description, and validation message.
Composes with Label, Input, and other controls.
Form
Form renders a vertical grid form container.
defaults
group.fieldset
Prop
Type
Notes
ID
string
Class
string
adds Tailwind utilities
Action
string
Method
string
Enctype
string
Autocomplete
string
Name
string
Target
string
NoValidate
bool
Attrs
attrs
Children
children
FormItem
FormItem groups a single field with spacing for label and control.
defaults
FormItem
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
FormDescription
FormDescription renders muted helper copy below a control.
explicit rel; external links default to noopener noreferrer
Download
string
External
bool
opens in a new tab with safe rel defaults
Disabled
bool
visually and semantically disables the link
AriaCurrent
string
AriaLabel
string
ID
string
Role
string
Attrs
attrs
Children
children
ui.radio
Radio is a native single-choice control within a named group.
Radio
Radio renders input[type=radio] with shared Name for grouping.
defaults
size.default
size.sm
variant.default
variant.ghost
layout.group
state.disabled
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Value
string
Checked
bool
Disabled
bool
Required
bool
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
ui.range
Range renders a styled input[type=range] (single thumb slider). The value is controlled from outside: Value in, an input event out (canary used a bindable prop).
Range
Range renders input type=range.
defaults
value.default
state.disabled
Prop
Type
Notes
Value
string
current value as a string, controlled by the caller
Min
int
lowest value, 0 by default
Max
int
highest value, 100 by default
Step
int
step, 1 by default
Disabled
bool
disables the slider
AriaLabel
string
accessible name
Class
string
adds Tailwind utilities
Attrs
attrs
ui.select
Select is a native dropdown built from Option items.
Select
Select renders option children from the Options list plus manual children.
defaults
size.sm
size.default
size.lg
size.xs
variant.default
variant.ghost
variant.outline
state.disabled
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Value
string
currently selected option value
Disabled
bool
Required
bool
Options
items
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
Children
children
SelectOption
SelectOption renders an option for custom Select children.
defaults
state.disabled
variant.default
Prop
Type
Notes
Value
string
Label
string
Selected
bool
Disabled
bool
Attrs
attrs
Children
children
OptGroup
OptGroup renders a native optgroup around option children.
defaults
state.disabled
Prop
Type
Notes
Class
string
adds Tailwind utilities
Label
string
Disabled
bool
Attrs
attrs
Children
children
ui.sheet
Sheet is a side drawer dialog with a trigger (Lucide menu/x) and a close button. Behavior: behaviors/ui8kit.js.
Sheet
Sheet renders the hidden dialog root: overlay + panel (children). ID is required for the trigger's aria-controls.
Prop
Type
Notes
Side
string
left or right
Class
string
adds Tailwind utilities
ID
string
dialog id (target of SheetTrigger Controls)
AriaLabel
string
accessible name (default: Menu)
Open
bool
render open (static); default hidden
Attrs
attrs
Children
children
SheetTrigger
SheetTrigger renders the menu button (aria-expanded, aria-controls, aria-haspopup=dialog) with Lucide menu/x icons.
defaults
variant.default
variant.ghost
variant.contrast
variant.current
size.sm
size.default
size.lg
side.right
side.left
Prop
Type
Notes
Variant
string
default, ghost, contrast, current
Size
string
sm, default, lg
Class
string
adds Tailwind utilities
Controls
string
id of the Sheet
AriaLabel
string
accessible name (default: Open menu)
Attrs
attrs
SheetClose
SheetClose renders the close button (Lucide x) inside the panel.
defaults
variant.default
variant.ghost
variant.contrast
variant.current
size.sm
size.default
size.lg
side.right
side.left
Prop
Type
Notes
Variant
string
default, ghost, contrast, current
Size
string
sm, default, lg
Class
string
adds Tailwind utilities
AriaLabel
string
accessible name (default: Close menu)
Attrs
attrs
ui.skeleton
Skeleton renders a pulsing placeholder box (loading state). It is decorative: aria-hidden; the loading state is announced by the container (aria-busy).
Skeleton
Skeleton renders a decorative placeholder.
defaults
shape.line
shape.block
Prop
Type
Notes
Shape
string
line, block or circle
Class
string
adds Tailwind utilities
Attrs
attrs
ui.switch
Switch is a toggle control (checkbox with switch ARIA semantics).
Use for on/off settings; wireframe uses native checkbox styling.
Switch
Switch renders input[type=checkbox] with switch role attrs.
defaults
size.default
size.sm
state.disabled
state.off
state.on
Prop
Type
Notes
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Value
string
Checked
bool
Disabled
bool
Required
bool
ID
string
TabIndex
string
AriaLabel
string
Attrs
attrs
ui.table
Table composes semantic table, caption, sections, rows, and cells.
Supports scope, colspan, and headers attrs on head cells.
Table
Table renders the root table element.
defaults
Table
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableCaption
TableCaption renders the table caption.
defaults
TableCaption
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableHead
TableHead renders the thead section.
defaults
TableHead
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableBody
TableBody renders the tbody section.
defaults
TableBody
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableFoot
TableFoot renders the tfoot section.
defaults
TableFoot
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableRow
TableRow renders one tr row.
defaults
TableRow
Prop
Type
Notes
Class
string
adds Tailwind utilities
Attrs
attrs
Children
children
TableHeadCell
TableHeadCell renders th with optional scope and abbr.
defaults
TableHeadCell
Prop
Type
Notes
Class
string
adds Tailwind utilities
Scope
string
th scope: col, row, colgroup, rowgroup
ColSpan
int
RowSpan
int
Headers
string
ids of related header cells
Abbr
string
abbreviated header text for th
Attrs
attrs
Children
children
TableCell
TableCell renders td with colspan and rowspan.
defaults
TableCell
Prop
Type
Notes
Class
string
adds Tailwind utilities
Scope
string
th scope: col, row, colgroup, rowgroup
ColSpan
int
RowSpan
int
Headers
string
ids of related header cells
Abbr
string
abbreviated header text for th
Attrs
attrs
Children
children
TableColGroup
TableColGroup renders colgroup with optional span.
defaults
TableColGroup
Prop
Type
Notes
Class
string
adds Tailwind utilities
Span
int
Attrs
attrs
Children
children
TableCol
TableCol renders a single col definition.
defaults
Prop
Type
Notes
Class
string
adds Tailwind utilities
Span
int
Attrs
attrs
ui.textarea
Textarea is a multi-line native text field with row sizing.
Textarea
Textarea renders a styled multi-line form control.
defaults
size.sm
size.default
size.lg
variant.default
variant.ghost
rows.custom
state.disabled
Prop
Type
Notes
Variant
string
sets appearance preset
Size
string
sets density preset
Class
string
adds Tailwind utilities
Name
string
Value
string
initial textarea content
Placeholder
string
Rows
int
visible line count; defaults to 4 when zero
Disabled
bool
Required
bool
ID
string
element id
Role
string
ARIA role override
TabIndex
string
tab order override
AriaLabel
string
accessible name for unlabeled controls
Attrs
attrs
ui.themetoggle
ThemeToggle switches between light and dark color schemes (button with aria-pressed). Behavior: data-ui8kit="theme-toggle" in behaviors/ui8kit.js.
ThemeToggle
ThemeToggle renders a button with Lucide sun/moon icons; aria-pressed reflects dark mode.
defaults
variant.default
variant.ghost
variant.contrast
variant.current
size.sm
size.default
size.lg
label.custom
Prop
Type
Notes
Variant
string
default, ghost, contrast (on primary surfaces), current (inherits text color)