API

Component API

Accordion

Type	Modifiers	Default	Description
Accordion	`details.ui-accordion`	-	The root element for the accordion. Requires the `.ui-accordion` class and optionally the `.ui-card` class for styling.
Group	`.ui-card[role="group"]`	-	Optional wrapper for accordion groups. To theme the entire group, apply the variant class to this element.
Attribute	`name`	-	The name of the accordion (used for grouping multiple accordions).
Part	`& > summary`, `& > .ui-content`, `& > .ui-actions`	-	Optional wrappers for child content.
Variants	`.ui-text`, `.ui-elevated`, `.ui-tonal`, `.ui-outlined`	`.ui-text`	The variant to use.

Anchor

Type	Modifiers	Default	Description
Container	`.ui-anchor`	-	Wrapper element. Provides `anchor-scope` and sets `anchor-name` on its first child.
Floating	`.ui-anchor-floating`	-	Positioned floating element. Uses `position-anchor` and `position-area`.
Position	`--anchor-position-area`	`start end`	CSS custom property. Any valid `position-area` value.
Trigger	`data-trigger="hover"`	-	Shows floating content on hover/focus. Add `interestfor` on the trigger element pointing to the `.ui-anchor-floating` ID.

Avatar

Type	Modifiers	Default	Description
Variants	`.ui-squared`, `.ui-rounded`, `.ui-squircle`	-	Sets the shape of the avatar.

Avatar group

Type	Modifiers	Default	Description
Container	`[role="group"]`	-	Required for grouped avatars.

Badge

Type	Modifiers	Default	Description
Container	`.ui-anchor.ui-badge`	-	Wrapper element. Extends Anchor.
Floating	`.ui-anchor-floating`	-	Positioned floating container from Anchor.
Indicator	`.ui-badge-indicator`	-	The badge content element inside `.ui-anchor-floating`.
Alignment	`.ui-start-start`, default, `.ui-end-start`, `.ui-end-end`	-	Position modifiers on `.ui-badge`. Default is centered on the end edge.
Color	`.ui-critical`, `.ui-info`, `.ui-neutral`, `.ui-success`, `.ui-warning`	-	Color modifiers on `.ui-badge`.
Variants	`.ui-dot`	-	Shape modifier on `.ui-badge`.
Visibility	`.ui-invisible`	-	Visibility modifier on `.ui-badge`.

Button

Type	Modifiers	Default	Description
Sizes	`.ui-small`, default, `.ui-large`	-	The size of the element.
Variants	default, `.ui-outlined`, `.ui-tonal`, `.ui-filled`	-	The variant to use.
Colors	`.ui-critical`, `.ui-primary`	-	Color modifiers. Default is a neutral gray.

Button Group

Type	Modifiers	Default	Description
Colors	`.ui-critical`, `.ui-primary`	-	Color modifiers; cascade to every button in the group. Default is a neutral gray.
Orientation	`.ui-vertical`	-	Orientation modifier.
Sizes	`.ui-small`, `.ui-large`	-	Size modifiers.
Variants	`.ui-outlined`, `.ui-tonal`, `.ui-filled`	-	Style modifiers.

Callout

Type	Modifiers	Default	Description
Part	`& > .ui-content`, `& > svg`	-	Internal structure.
Severities	`.ui-critical`, `.ui-info`, `.ui-primary`, `.ui-success`, `.ui-warning`	-	Severity modifiers.
Variants	`.ui-tonal`, `.ui-outlined`	`.ui-tonal`	Style modifiers.

Card

Type	Modifiers	Default	Description
Children	`& > hgroup`, `& > .ui-content`, `& > .ui-actions`	-	Optional wrappers for child content.
Variants	`.ui-text`, `.ui-outlined`, `.ui-tonal`, `.ui-elevated`	`.ui-text`	The variant to use.
Alignment	`.ui-align-end`	-	Align actions to the end.

Checkbox

Type	Modifiers	Default	Description
Children	`.ui-label`, `.ui-end-text`	-	Internal element classes.
Layout	`.ui-spread`, `.ui-stack`, default	-	The layout of the component. `.ui-spread` pushes label and input to opposite ends. `.ui-stack` stacks the label under the input.
Sizes	`.ui-small`, `.ui-large`	-	Size modifiers.
Validation	`[data-invalid]`	-	Error state modifier.
State	`data-indeterminate`	-	Marker attribute on the `<input>`. Pair with a script that sets `el.indeterminate = true` — the property is JS-only and the attribute alone has no effect.

Chip

Type	Modifiers	Default	Description
Container	`.ui-chip`, `a.ui-chip`, `button.ui-chip`	-	Container element type.
Children	`& > .ui-text`, `& > svg`	-	Optional child content.
Sizes	`.ui-small`, default, `.ui-multiline`	-	The size of the element.
Variants	`.ui-tonal`, `.ui-outlined`	`.ui-tonal`	The variant to use.

Classic Select

Type	Modifiers	Default	Description
Sizes	`.ui-small`	-	The size of the element.
Variants	default, `.ui-filled`	-	The variant to use.

Description List

Type	Modifiers	Default	Description
Bordered	`.ui-bordered`, `.ui-bordered.ui-dotted`	-	Adds a separator between the term and description on all items. Add `.ui-dotted` for a dotted style.

Dialog

Type	Modifiers	Default	Description
Styles	`.ui-dialog.ui-card.ui-elevated`	Included	The dialog uses card styles by default.
Closed by	`closedby` attribute	-	The attribute used to control close behavior.

Divider

Type	Modifiers	Default	Description
Variant	`.ui-border-tonal`, `.ui-border-filled`, `.ui-border-primary`	-	Visual variant modifiers.

Drawer

Classes

Type	Modifiers	Default	Description
Sides	`.ui-inline-start`, `.ui-inline-end`, `.ui-block-start`, `.ui-block-end`	`.ui-inline-start`	The side it opens from.
Close behavior	`closedby="any"`, `closedby="closerequest"`, `closedby="none"`	`closedby="any"`	How the drawer is closed.
Backdrop	`.ui-backdrop-transparent`	-	Removes the backdrop blur.
Autofocus	`autofocus`	-	Focuses the drawer container (or a specific element) when opened. Prevents focus from jumping to the first focusable element.

Children

Class	-	-	Description
`.ui-header`	-	-	Top area for titles.
`.ui-content`	-	-	Main content area.
`.ui-actions`	-	-	Bottom action area.

Field Group

Type	Modifiers	Default	Description
Children	`<legend>`, `.ui-legend`, `.ui-checkbox`, `.ui-radio`, `.ui-switch`, `.ui-text-field`, `.ui-textarea`, `.ui-select`	-	Supported child elements.
Direction	default, `.ui-row`	-	The orientation of the element.
Disabled	`[disabled]`	-	When applied, disabled styles are shown.
Validation	`[data-invalid]`	-	When applied, error styles are shown.

Form

Type	Modifiers	Default	Description
Base	`.ui-form`	-	The main form container.

FieldSet

Type	Modifiers	Default	Description
Base	`.ui-fieldset`	-	The field set container.
Modifiers	`[disabled]`	-	Whether the field set is disabled.

FieldLegend

Type	Modifiers	Default	Description
Base	`.ui-legend`, `legend`	-	The label for the field set.

Field description

Type	Modifiers	Default	Description
Base	`.ui-field-description`	-	Field description for the field set.

FieldGroup

Type	Modifiers	Default	Description
Base	`.ui-field-group`	-	Container for related input components.
Variants	`.ui-row`, default	-	The orientation of the field group.

Icon Button

Type	Modifiers	Default	Description
Variants	`.ui-outlined`, `.ui-tonal`, `.ui-filled`	-	The visual style of the icon button.
Sizes	`.ui-small`	-	The size of the element.
Colors	`.ui-critical`, `.ui-primary`	-	Color modifiers for the icon button. Default is a neutral gray.
States	`[disabled]`	-	Attribute to disable the icon button.

List

List

Type	Modifiers	Default	Description
Dense	`.ui-dense`	-	When enabled list appears tighter packed.
Gutterless	`.ui-gutterless`	-	When enabled list inline padding is removed.
Bordered	`.ui-bordered`	-	When enabled a border is rendered on all list items.
Variants	`.ui-default`, `.ui-tonal`, `.ui-transparent`	-	Background color variants.

List item

Type	Modifiers	Default	Description
Main parts	`li > .ui-start`, `li > .ui-text`, `li > .ui-end`	-	Building blocks in List item.
Inset	`.ui-inset`	-	When enabled a list item without a start icon aligns with items that do.
Border top	`.ui-border-top`	-	When enabled the list item will get a top border.

Progress

Type	Modifiers	Default	Description
Progress	`<div class="ui-progress"><progress>…</progress></div>`	-	Wrapper div with the native HTML progress element inside.
Indeterminate	No `value` attribute	-	Display an indeterminate loading state.
Variant	`.ui-filled`, `.ui-default`, `.ui-tonal`	-	Modifiers on the wrapper div for different background surfaces.

Range

Type	Modifiers	Default	Description
Input	`input[type="range"]`	-	The native range input element.
Range	`.ui-range`	-	Wrapper for label and input styling.
Spread	`.ui-spread`	-	Modifier for a spread layout.
Variant	`.ui-filled`, `.ui-default`, `.ui-tonal`	-	Modifiers for different background surfaces.
Label	`.ui-label`	-	The label element for the range.
Value	`output.value`	-	Optional `<output>` showing the input's current value. Use `for` to associate it with the input and an optional `data-suffix` attribute for a unit suffix.
Start text	`.ui-start-text`	-	Optional text displayed between label and the range input (often used with spread layout).
End text	`.ui-end-text`	-	Optional text displayed below the range input.
Spread	`.ui-spread`	-	Modifier class to layout label and input on opposite sides.

Select

Type	Modifiers	Default	Description
Children	`.ui-label`, `.ui-start-text`, `.ui-field`, `.ui-end-text`	-	Direct children of the root element.
Field children	`<select>`, `.ui-prefix`, `.ui-suffix`, `.ui-header`, `.ui-footer`	-	Children of `.ui-field`. The `<select>` comes first, then optional affixes.
Layout	`.ui-spread`, default	-	The layout of the component. `.ui-spread` pushes label and description to the left and select to the right.
Sizes	`.ui-small`	-	The size of the element.
Variants	default, `.ui-filled`	-	The variant to use.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.

Spinner

Type	Modifiers	Default	Description
State	`aria-busy="true"`	-	Renders a spinner pseudo-element on the element. Always indeterminate.
Sizes	`font-size` on the element	`1em`	Spinner size follows the element's computed font size.
Excluded	`<input>`, `<select>`, `<textarea>`, `<html>`, `<progress>`, elements with `aria-describedby`	-	Elements that never receive a spinner.

Switch

Type	Modifiers	Default	Description
Children	`.ui-label`, `.ui-end-text`, `.ui-icon-unchecked`, `.ui-icon-checked`	-	Optional children.
Sizes	`.ui-small`, default	-	The size of the element.
Layout	`.ui-spread`, `.ui-stack`, default	-	The layout of the switch. `.ui-spread` pushes label and switch to opposite ends. `.ui-stack` stacks the label under the switch.
Validation	`[data-invalid]`	-	When applied, error styles are shown.

Table

Type	Modifiers	Default	Description
Table	`<table class="ui-table">`	-	The native HTML table element.
Dense	`.ui-dense`	-	When applied the table will appear denser.
Spacious	`.ui-spacious`	-	When applied the table will appear more spacious.

Tabs

Tabs container

The container that organizes the tab grid.

Attribute	Value	Description
`class`	`"ui-tabs"`	Required class for the parent container.
`role`	`"tablist"`	Required for accessibility.

Tab State (input)

A hidden radio button that manages the selection state.

Attribute	Value	Description
`type`	`"radio"`	Required for state management.
`class`	`"ui-tab-input"`	Required for behavior and styling.
`name`	`string`	Shared across all tabs in the group.
`checked`	`boolean`	Applied to the initially active tab.
`aria-controls`	`ID`	Should match the ID of the corresponding panel.

Tab Trigger (label)

Attribute	Value	Description
`class`	`"ui-tab-label"`	Required for behavior and styling.
`for`	`ID`	Must match the ID of the radio input.
`role`	`"tab"`	Required for accessibility.

Tab Panel (div)

Attribute	Value	Description
`class`	`"ui-tab-panel"`	Required for behavior and styling.
`role`	`"tabpanel"`	Required for accessibility.
`aria-labelledby`	`ID`	Should match the ID of the corresponding trigger.

Text Field

Type	Modifiers	Default	Description
Auto-fit	`.ui-auto-fit`	-	When enabled, the element changes size depending on its content.
Children	`.ui-label`, `.ui-start-text`, `.ui-field`, `<datalist>`, `.ui-end-text`	-	Direct children of the root element.
Field children	`<input>`, `<select>`, `<textarea>`, `.ui-prefix`, `.ui-suffix`, `.ui-header`, `.ui-footer`	-	Children of `.ui-field`. The control element comes first, then optional affixes.
Layout	`.ui-spread`, default	-	The layout of the component. `.ui-spread` pushes label and description to the left and input to the right.
Sizes	`.ui-small`	-	The size of the element.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.
Variants	default, `.ui-filled`	-	The variant to use.

Text Input

Type	Modifiers	Default	Description
Wrapper	`.ui-field`	-	The `<input>` must be wrapped in a `<span class="ui-field">` element. Border, background, and focus styling are inherited from `.ui-field`, not the input itself.
Auto-fit	`.ui-auto-fit`	-	When enabled, the element changes size depending on its content.
Sizes	`.ui-small`	-	The size of the element.
Variants	default, `.ui-filled`	-	The variant to use.

Textarea

Type	Modifiers	Default	Description
Children	`.ui-label`, `.ui-start-text`, `.ui-field`, `.ui-end-text`	-	Direct children of the root element.
Field children	`<textarea>`, `.ui-prefix`, `.ui-suffix`, `.ui-header`, `.ui-footer`	-	Children of `.ui-field`. The `<textarea>` comes first, then optional affixes.
Auto-fit	`.ui-auto-fit`	-	When enabled, the element changes size depending on its content.
Layout	`.ui-spread`, default	-	The layout of the component. `.ui-spread` pushes label and description to the left and textarea to the right.
Variants	default, `.ui-filled`	-	The variant to use.
Validation	`[data-invalid]`	-	Add the `data-invalid` attribute to the root element to show error styles.

Toast

Type	Modifiers	Default	Description
Command	`--show-toast`	-	Custom invoker command to trigger a toast notification.
Message	`value` / `textContent`	-	The message to display in the toast.
Severity	`data-severity`	`info`	Modifies the toast appearance. Options: `success`, `critical`, `info`.
Duration	`data-duration`	`5000ms`	Determines how long the toast remains visible. Supports CSS time units (ms, s).
Container	`#toast-manager`	-	The global fixed container that manages the stack of toasts.
Component	`.ui-toast`	-	Individual notification element within the container.

Toggle

Toggle Button

Type	Modifiers	Default	Description
Sizes	default, `.ui-small`, `.ui-x-small`	-	The size of the button.
States	`.ui-disabled`	-	The state of the button.

Toggle Group

Type	Modifiers	Default	Description
Sizes	default, `.ui-small`, `.ui-x-small`	-	The size of the group. Children inherit the size if desired through CSS variables.
Children	`label.ui-toggle-button` containing an `input[type="radio\|checkbox"]`	-	The interactive elements within the group. Visual states are driven by `input:checked`.

Type	Modifiers	Default	Description
Container	`.ui-anchor.ui-tooltip`	-	Wrapper element. Combines the anchor primitive with the tooltip styling.
Floating	`.ui-anchor-floating[popover="hint"]`	-	Floating tooltip surface. Uses the `hint` popover so it auto-shows on `interestfor` hover/focus.
Trigger	`interestfor="id"`	-	Add to the trigger element pointing to the floating element's ID. Pair with `commandfor` and `command="toggle-popover"` for touch support.
Arrow	`.ui-with-arrow`	-	Add to the `.ui-tooltip` wrapper to render an arrow pointing from the tooltip toward the trigger.
Position	`--anchor-position-area`	`block-start`	CSS custom property. Any valid `position-area` value.

Typography

Type	Modifiers	Default	Description
Headings	`.ui-h1`, `.ui-h2`, `.ui-h3`, `.ui-h4`, `.ui-h5`, `.ui-h6`	-	Heading styles for any element.
Paragraph	`.ui-p`	-	Body paragraph styling.
Sizes	`.ui-small`, `.ui-large`	-	Size modifiers on `.ui-p`.
Overline	`.ui-overline`	-	Small uppercase label text.
Caption	`.ui-caption`	-	Muted supporting text.
Heading group	`.ui-hgroup`	-	Groups an overline, heading, and optional body copy.
Blockquote	`.ui-blockquote`	-	Quoted block with a start border.
Code block	`pre.ui-code-block`	-	Monospace preformatted block.
Inline	`.ui-abbr`, `.ui-cite`, `.ui-del`, `.ui-dfn`, `.ui-ins`, `.ui-kbd`, `.ui-mark`, `.ui-s`, `.ui-samp`, `.ui-small`, `.ui-sub`, `.ui-sup`, `.ui-u`, `.ui-var`	-	Inline text element utilities.
Rich text	`.ui-rich-text`	-	Classless typography for uncontrolled child markup.