# Mlola UI: everything in one file

Version 1.1.4. Generated from the registry at https://ui.mlola.com. Free components are shown in full; Mlola Pro items are described, and their source comes with a license.

---

# Mlola UI for code generation

Generated from the source of truth. Do not edit by hand.

## Read this first

- **Do not import a styling framework.** The library ships its own CSS. There
  is no Tailwind, no CSS-in-JS and no class name utility to install.
- **Style through the classes below, never through invented ones.** A class
  that is not in this document does not exist. (Mlola Pro's classes are in the
  guide that comes with Pro source.)
- **Behavior is optional and framework-free.** `@mlola-ui/behavior` attaches
  to markup you already rendered. It never renders anything itself, so it works
  with React, Svelte, Vue, Rails, a Go template or a static file.
- **Native controls stay native.** Checkbox and radio are real `<input>`
  elements. Do not reimplement them.

## The shortest correct example

```html
<link rel="stylesheet" href="@mlola-ui/engine" />

<div data-theme="graphite" data-mode="light">
  <button class="ml-button" data-variant="primary">Save</button>
</div>

<script type="module">
  import { observe } from "@mlola-ui/behavior";
  observe();
</script>
```

## Themes

Set `data-theme` and `data-mode` on any ancestor. Nothing else changes.

| id | name |
| --- | --- |
| `graphite` | Graphite |
| `atelier` | Atelier Umami |
| `machined` | Machined Titanium |
| `aerogel` | Aerogel Glass |
| `nordic` | Nordic Earth |

`data-mode` is `light`, `dark`, or `system`, which follows the reader's own setting.
The themes' type reads `--font-inter`, `--font-newsreader` and `--font-jetbrains` before its fallbacks: load those fonts (next/font's `variable` option, or @font-face) and set the variables on the root, or the page uses the system's fonts.

A project defines its own theme in one file, `mlola.theme.json`, which
overrides fonts, colors, geometry, the spacing and type scale, and any
custom property through `extend`. See `mlola.theme.example.json`.

## Tokens

Every value a design needs is a token. Read them with `var()`; never write
a color, a size from outside the scales, a shadow or a duration by hand.
Values change with the theme and the mode, the names never do.

- **Planes and ink.** Backgrounds, surfaces, the three levels of text, borders.
  `--ml-background` `--ml-background-subtle` `--ml-surface` `--ml-surface-elevated` `--ml-text` `--ml-text-muted` `--ml-text-faint` `--ml-border` `--ml-border-subtle`
- **Color roles.** Each role is a fill with its `-foreground` and `-hover`, a `-text` for text and marks on the page, and (primary) a `-subtle` tint.
  `--ml-primary` `--ml-primary-foreground` `--ml-primary-hover` `--ml-primary-text` `--ml-primary-subtle` `--ml-success` `--ml-success-foreground` `--ml-success-hover` `--ml-success-text` `--ml-warning` `--ml-warning-foreground` `--ml-warning-hover` `--ml-warning-text` `--ml-danger` `--ml-danger-foreground` `--ml-danger-hover` `--ml-danger-text` `--ml-info` `--ml-info-foreground` `--ml-info-hover` `--ml-info-text`
- **Charts.** A categorical palette for series, 3:1 on the surface. Never a status.
  `--ml-chart-1` `--ml-chart-2` `--ml-chart-3` `--ml-chart-4` `--ml-chart-5` `--ml-chart-6`
- **Interaction and light.** Focus, hover and pressed fills, tracks, the veil behind overlays, light and knobs.
  `--ml-focus` `--ml-fill-hover` `--ml-fill-active` `--ml-track` `--ml-control-border` `--ml-ring` `--ml-scrim` `--ml-highlight` `--ml-knob` `--ml-knob-shadow` `--ml-sheen`
- **Spacing.** The only spacing: gaps, padding, margins, offsets.
  `--ml-space-px` `--ml-space-0-5` `--ml-space-1` `--ml-space-1-5` `--ml-space-2` `--ml-space-2-5` `--ml-space-3` `--ml-space-3-5` `--ml-space-4` `--ml-space-4-5` `--ml-space-5` `--ml-space-6` `--ml-space-7` `--ml-space-8` `--ml-space-9` `--ml-space-10` `--ml-space-12` `--ml-space-14` `--ml-space-16`
- **Type.** The only type sizes, line heights, families and weights.
  `--ml-type-2xs` `--ml-type-xs` `--ml-type-sm` `--ml-type-base` `--ml-type-md` `--ml-type-lg` `--ml-type-xl` `--ml-type-2xl` `--ml-leading-tight` `--ml-leading-snug` `--ml-leading-normal` `--ml-font-sans` `--ml-font-display` `--ml-font-mono` `--ml-display-weight` `--ml-body-leading` `--ml-tracking`
- **Density.** Control heights, panel padding, the touch target.
  `--ml-control-sm` `--ml-control-md` `--ml-control-lg` `--ml-panel-padding` `--ml-target-min`
- **Shape.** Corner radii by the size of the thing, and the border weight.
  `--ml-radius-xs` `--ml-radius-sm` `--ml-radius-md` `--ml-radius-lg` `--ml-radius-pill` `--ml-border-width`
- **Depth and material.** Elevation, and the material a floating surface is made of.
  `--ml-texture-opacity` `--ml-material` `--ml-surface-alpha` `--ml-surface-blur` `--ml-surface-grain` `--ml-surface-highlight` `--ml-shadow-xs` `--ml-shadow-sm` `--ml-shadow-md` `--ml-shadow-lg` `--ml-shadow-xl` `--ml-shadow-tint`
- **Motion.** Every transition and entrance.
  `--ml-duration-fast` `--ml-duration-normal` `--ml-duration-slow` `--ml-duration-reveal` `--ml-ease-standard` `--ml-ease-spring` `--ml-ease-bounce`
- **Layers.** The one stacking order.
  `--ml-layer-raised` `--ml-layer-sticky` `--ml-layer-header` `--ml-layer-dropdown` `--ml-layer-overlay` `--ml-layer-modal` `--ml-layer-popover` `--ml-layer-toast` `--ml-layer-tooltip` `--ml-layer-top`
- **Icons.** The theme's icon channel.
  `--ml-icon-stroke`

## Designing new UI in the Mlola language

When the elements above do not cover what you need, build it the way they are
built, and it will look like it belongs.

1. **Compose first.** Reach for a component, then a layout primitive, and
   write CSS only for what neither covers. Put it in a layer of your own,
   declared before `mlola.accessibility` so the accessibility guarantees
   still win:
   `@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, app, mlola.accessibility;`
2. **Name what it is, not how it looks.** One class per element role, with
   your own prefix (not `ml-`, so a later Mlola element never collides).
   State and variant go in `data-*` and `aria-*`, never in a second class.
   Reuse the shared words: `data-tone` is `neutral primary info success
   warning danger`; `data-size` is `xs sm md lg xl`; work that went
   wrong is `error`.
3. **Color by role, never by value.** Planes are `background`,
   `background-subtle`, `surface`, `surface-elevated`. Ink is `text`,
   `text-muted`, `text-faint`. A colored fill (`primary`, `danger`, …)
   always carries its `-foreground`. Colored text, icons, lines and status
   marks on the page use the `-text` role: fills are only kept 1.5:1 from the
   page, enough for an area, not for meaning. Series use `chart-1`…`chart-6`.
4. **Measure with the scales.** Spacing from `--ml-space-*`, type from
   `--ml-type-*` with `--ml-leading-*`, control heights from
   `--ml-control-*`, panel padding from `--ml-panel-padding`. A `clamp()`
   between two steps is fine; a value invented between them is not.
5. **Shape and depth come from the theme.** Radii by the size of the thing
   (`xs` a tag, `sm` a small control, `md` a control or card, `lg` a panel
   or dialog, `pill`). Elevation from `--ml-shadow-*`; a floating surface
   also takes the material: `--ml-surface-alpha`, `--ml-surface-blur`,
   `--ml-surface-highlight`.
6. **Move with the theme.** Durations from `--ml-duration-*`, easing from
   `--ml-ease-*`. Reduced motion is handled by the engine.
7. **Stack with the layers.** `--ml-layer-*`, never a raw z-index above 9.
8. **Keep it usable by hand.** Never remove an outline without a
   `:focus-visible` style in its place. Targets are at least 24px; a smaller
   control adds `data-hit="expand"` for touch. Text is never under
   `--ml-type-2xs`.
9. **Leave the theme alone.** `data-theme` and `data-mode` belong to the
   engine; never set them for a component's own meaning, and never style a
   theme or mode by name. If something must differ by theme, it is a token.

## Composition primitives

Compose pages from these before writing layout CSS: sections, stacks,
clusters, grids, headings, forms, stats. They read the same tokens as every
component, so a page built from them themes with the rest.

`.ml-actions` `.ml-brand` `.ml-brand-mark` `.ml-brand-name` `.ml-chart` `.ml-chart-bar` `.ml-chart-bars` `.ml-chart-heading` `.ml-check-list` `.ml-cluster` `.ml-definition-list` `.ml-display` `.ml-divider` `.ml-empty-state` `.ml-eyebrow` `.ml-filter-chip` `.ml-filter-group` `.ml-fine-print` `.ml-form` `.ml-form-message` `.ml-form-options` `.ml-grid` `.ml-heading` `.ml-icon-chip` `.ml-inline-form` `.ml-inline-form-field` `.ml-label` `.ml-lede` `.ml-link` `.ml-link-external` `.ml-page-shell` `.ml-person` `.ml-person-copy` `.ml-positive` `.ml-price` `.ml-required-mark` `.ml-section` `.ml-section-description` `.ml-section-header` `.ml-section-header-centered` `.ml-section-muted` `.ml-section-shell` `.ml-stack` `.ml-stat` `.ml-stat-card` `.ml-stat-grid` `.ml-stat-list` `.ml-stat-meta` `.ml-stat-value` `.ml-text-primary` `.ml-value`

- `.ml-brand-mark` — A brand's own logo takes the mark's place: no chip, the text color, the mark's size.
- `.ml-check-list` — A list of benefits, each after a check. Pricing tiers and feature rows share it.
- `.ml-link` — A glyph inside a link flows with the text instead of breaking the line.
- `.ml-link-external` — The mark after a link to another site, which opens in a new tab.
- `.ml-page-shell` — The navigation, main and footer are grid items; they may be narrower than their widest content (a table that scrolls), so the page never does.
- `.ml-section` — A section a link jumps to clears the sticky navigation bar.

## Elements and their attributes

Emit these classes and attributes from any language and the visuals are
correct. This table is read out of the stylesheet, so it is never stale.

| class | attribute | allowed values |
| --- | --- | --- |
| `.ml-accordion-item` | `data-state` | `open` |
| `.ml-alert` | `data-state` | `closing` |
| `.ml-alert` | `data-tone` | `danger`, `info`, `neutral`, `success`, `warning` |
| `.ml-alert` | `data-variant` | `soft` |
| `.ml-app-shell` | `data-narrow` | _presence only_ |
| `.ml-avatar-root` | `data-size` | `lg`, `sm`, `xl`, `xs` |
| `.ml-avatar-status` | `data-status` | `away`, `busy`, `online` |
| `.ml-badge` | `data-size` | `lg`, `sm` |
| `.ml-badge` | `data-tone` | `danger`, `info`, `primary`, `success`, `warning` |
| `.ml-badge` | `data-variant` | `outline`, `solid` |
| `.ml-brand-mark` | `data-kind` | `logo` |
| `.ml-breadcrumb-item` | `data-collapse-indicator` | _presence only_ |
| `.ml-breadcrumb-item` | `data-collapsible` | _presence only_ |
| `.ml-button` | `aria-disabled` | `true` |
| `.ml-button` | `aria-pressed` | `true` |
| `.ml-button` | `data-loading` | _presence only_ |
| `.ml-button` | `data-size` | `icon`, `lg`, `sm` |
| `.ml-button` | `data-state` | `success` |
| `.ml-button` | `data-variant` | `danger`, `link`, `outline`, `primary`, `secondary`, `subtle` |
| `.ml-button` | `data-width` | `full` |
| `.ml-calendar-cell` | `data-preview` | _presence only_ |
| `.ml-calendar-cell` | `data-range` | `end`, `start` |
| `.ml-calendar-day` | `aria-disabled` | `true` |
| `.ml-calendar-day` | `data-outside` | _presence only_ |
| `.ml-calendar-day` | `data-selected` | _presence only_ |
| `.ml-calendar-day` | `data-today` | _presence only_ |
| `.ml-calendar-day` | `data-unreachable` | _presence only_ |
| `.ml-card` | `data-interactive` | _presence only_ |
| `.ml-card` | `data-variant` | `elevated`, `glass`, `specular` |
| `.ml-carousel` | `data-arrows` | _presence only_ |
| `.ml-carousel` | `data-playing` | _presence only_ |
| `.ml-carousel-arrow` | `data-side` | `next`, `previous` |
| `.ml-carousel-dot` | `aria-current` | `true` |
| `.ml-chart-bar` | `data-highlighted` | `true` |
| `.ml-checkbox-field` | `data-state` | `checked`, `indeterminate` |
| `.ml-circular-progress` | `data-size` | `lg`, `sm` |
| `.ml-circular-progress` | `data-state` | `complete`, `indeterminate` |
| `.ml-circular-progress` | `data-tone` | `danger`, `info`, `success`, `warning` |
| `.ml-color-picker-preset` | `aria-pressed` | `true` |
| `.ml-combobox-control` | `data-open` | _presence only_ |
| `.ml-combobox-input` | `data-clearable` | _presence only_ |
| `.ml-combobox-input` | `data-leading` | _presence only_ |
| `.ml-combobox-option` | `aria-disabled` | `true` |
| `.ml-combobox-option` | `aria-selected` | `true` |
| `.ml-combobox-option` | `data-create` | _presence only_ |
| `.ml-combobox-option` | `data-highlighted` | _presence only_ |
| `.ml-combobox-popover` | `data-side` | `top` |
| `.ml-command-item` | `aria-disabled` | _presence only_ |
| `.ml-command-item` | `aria-selected` | `true` |
| `.ml-context-menu-item` | `aria-disabled` | `true` |
| `.ml-context-menu-item` | `data-danger` | _presence only_ |
| `.ml-context-menu-item` | `data-highlighted` | _presence only_ |
| `.ml-copy-button` | `data-status` | `error` |
| `.ml-date-picker-panel` | `data-presets` | _presence only_ |
| `.ml-date-picker-trigger` | `data-empty` | _presence only_ |
| `.ml-dropdown-item` | `data-danger` | _presence only_ |
| `.ml-dropdown-item` | `data-highlighted` | _presence only_ |
| `.ml-dropdown-menu` | `data-align` | `end` |
| `.ml-dropdown-trigger` | `aria-expanded` | `true` |
| `.ml-dropzone` | `aria-disabled` | _presence only_ |
| `.ml-dropzone` | `data-dragging` | _presence only_ |
| `.ml-dropzone-file` | `data-status` | `error` |
| `.ml-empty` | `data-size` | `page` |
| `.ml-filter-chip` | `aria-pressed` | `true` |
| `.ml-filter-chip` | `data-state` | `active` |
| `.ml-form-message` | `data-tone` | `danger`, `success` |
| `.ml-grid` | `data-columns` | `1`, `2`, `3`, `4`, `6` |
| `.ml-grid` | `data-layout` | `3-col`, `4-col`, `list` |
| `.ml-heatmap` | `data-tone` | `info`, `success`, `warning` |
| `.ml-heatmap-cell` | `data-active` | _presence only_ |
| `.ml-heatmap-cell` | `data-level` | `1`, `2`, `3`, `4` |
| `.ml-heatmap-cell` | `data-outside` | _presence only_ |
| `.ml-input` | `aria-invalid` | `true` |
| `.ml-input` | `data-invalid` | _presence only_ |
| `.ml-input` | `data-size` | `lg`, `sm` |
| `.ml-input` | `data-variant` | `filled`, `subtle` |
| `.ml-input-control` | `data-leading` | _presence only_ |
| `.ml-input-control` | `data-trailing` | _presence only_ |
| `.ml-input-field` | `data-invalid` | _presence only_ |
| `.ml-modal` | `data-size` | `full`, `lg`, `sm`, `xl` |
| `.ml-number-input-control` | `data-disabled` | _presence only_ |
| `.ml-number-input-control` | `data-invalid` | _presence only_ |
| `.ml-otp` | `data-invalid` | _presence only_ |
| `.ml-pagination-button` | `aria-current` | `page` |
| `.ml-pagination-button` | `data-state` | `active` |
| `.ml-password-input-strength` | `data-strength` | `medium`, `strong`, `weak` |
| `.ml-password-input-toggle` | `aria-pressed` | `true` |
| `.ml-popover` | `data-side` | `bottom`, `left`, `right`, `top` |
| `.ml-priority-icon` | `data-priority` | `high`, `none`, `urgent` |
| `.ml-progress-root` | `data-active` | _presence only_ |
| `.ml-progress-root` | `data-size` | `lg`, `sm` |
| `.ml-progress-root` | `data-state` | `complete`, `indeterminate` |
| `.ml-progress-root` | `data-tone` | `danger`, `info`, `success`, `warning` |
| `.ml-radio-group` | `data-orientation` | `horizontal` |
| `.ml-radio-item` | `data-state` | `checked` |
| `.ml-resizable` | `data-anchor` | `second` |
| `.ml-resizable` | `data-direction` | `horizontal`, `vertical` |
| `.ml-resizable-pane` | `data-folded` | _presence only_ |
| `.ml-segmented-control-item` | `aria-pressed` | `true` |
| `.ml-segmented-control-item` | `data-state` | `active` |
| `.ml-select` | `data-size` | `lg`, `sm` |
| `.ml-select` | `data-state` | `open` |
| `.ml-select-option` | `data-disabled` | _presence only_ |
| `.ml-select-option` | `data-highlighted` | _presence only_ |
| `.ml-select-option` | `data-state` | `checked` |
| `.ml-select-popover` | `data-side` | `top` |
| `.ml-select-root` | `data-invalid` | _presence only_ |
| `.ml-select-value` | `data-placeholder` | _presence only_ |
| `.ml-sheet-panel` | `data-side` | `bottom`, `left`, `right`, `top` |
| `.ml-sheet-panel` | `data-size` | `lg`, `sm` |
| `.ml-sidebar-item` | `aria-current` | `page` |
| `.ml-sidebar-title` | `aria-expanded` | `false` |
| `.ml-sidebar-title` | `data-collapsible` | _presence only_ |
| `.ml-skeleton` | `data-rounded` | `none` |
| `.ml-slider-field` | `data-size` | `sm` |
| `.ml-spinner` | `data-size` | `lg`, `sm` |
| `.ml-status-icon` | `data-status` | `backlog`, `canceled`, `done`, `in-progress`, `in-review` |
| `.ml-stepper` | `data-orientation` | `horizontal`, `vertical` |
| `.ml-stepper-step` | `data-status` | `complete`, `current`, `error`, `upcoming` |
| `.ml-table` | `data-size` | `sm` |
| `.ml-table` | `data-stripe` | `alternate` |
| `.ml-table` | `data-striped` | _presence only_ |
| `.ml-table-row` | `data-state` | `selected` |
| `.ml-tabs` | `data-orientation` | `vertical` |
| `.ml-tabs` | `data-variant` | `enclosed`, `pills` |
| `.ml-tabs-trigger` | `aria-selected` | `true` |
| `.ml-tabs-trigger` | `data-state` | `active` |
| `.ml-tag-input-control` | `data-disabled` | _presence only_ |
| `.ml-tag-input-control` | `data-invalid` | _presence only_ |
| `.ml-tag-input-tag` | `data-armed` | _presence only_ |
| `.ml-textarea-count` | `data-full` | _presence only_ |
| `.ml-time-picker-control` | `data-disabled` | _presence only_ |
| `.ml-time-picker-control` | `data-unavailable` | _presence only_ |
| `.ml-time-picker-option` | `aria-selected` | `true` |
| `.ml-time-picker-segment` | `data-empty` | _presence only_ |
| `.ml-time-picker-segment` | `data-period` | _presence only_ |
| `.ml-timeline-item` | `data-status` | `complete`, `current`, `upcoming` |
| `.ml-timeline-marker` | `data-status` | `complete`, `current`, `upcoming` |
| `.ml-timeline-marker` | `data-tone` | `danger`, `info`, `primary`, `success`, `warning` |
| `.ml-toast` | `data-has-description` | _presence only_ |
| `.ml-toast` | `data-swiping` | _presence only_ |
| `.ml-toast` | `data-tone` | `danger`, `info`, `success`, `warning` |
| `.ml-toast-slot` | `data-state` | `closed` |
| `.ml-toaster` | `data-position` | `bottom-center`, `bottom-right`, `top-center`, `top-right` |
| `.ml-toggle` | `aria-checked` | `true` |
| `.ml-toggle` | `data-size` | `lg`, `sm` |
| `.ml-toggle` | `data-state` | `checked` |
| `.ml-toggle-button` | `aria-pressed` | `true` |
| `.ml-toggle-button` | `data-state` | `on` |
| `.ml-tooltip` | `data-side` | `bottom`, `left`, `right`, `top` |
| `.ml-tour-button` | `data-primary` | _presence only_ |
| `.ml-tour-card` | `data-centered` | _presence only_ |
| `.ml-tour-dot` | `data-active` | _presence only_ |
| `.ml-tour-scrim` | `data-spotlight` | _presence only_ |

## Behavior

### accordion

Disclosure list. One panel open at a time, or several.

- Root: `.ml-accordion`
- Parts: item `.ml-accordion-item`, trigger `.ml-accordion-trigger`, panel `.ml-accordion-panel`
- ARIA on trigger: `role` — button (a real <button> is preferred); `aria-expanded` — true when the item is open; `aria-controls` — id of the panel
- ARIA on panel: `role` — region; `aria-labelledby` — id of the trigger
- Keyboard:
  - <kbd>Enter</kbd> / <kbd>Space</kbd>: Toggle the focused item.
  - <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>: Move focus between triggers.
  - <kbd>Home</kbd> / <kbd>End</kbd>: Focus the first or last trigger.
- State changes:
  - On click or activate a trigger, set data-state on the item, trigger and panel to open, or closed when it was open and collapsing is allowed. Also: hide the closed panel from the accessibility tree.

### tabs

One panel visible at a time, selected by a tab strip.

- Root: `.ml-tabs`
- Parts: list `.ml-tabs-list`, trigger `.ml-tabs-trigger`, content `.ml-tabs-content`
- ARIA on list: `role` — tablist; `aria-orientation` — matches data-orientation
- ARIA on trigger: `role` — tab; `aria-selected` — true on the active tab; `aria-controls` — id of the panel; `tabindex` — 0 on the active tab, -1 on the rest
- ARIA on content: `role` — tabpanel; `aria-labelledby` — id of the tab
- Keyboard:
  - <kbd>ArrowRight</kbd> / <kbd>ArrowLeft</kbd>: Move to the next or previous enabled tab when horizontal, wrapping around.
  - <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>: The same when vertical.
  - <kbd>Home</kbd> / <kbd>End</kbd>: Move to the first or last enabled tab.
- State changes:
  - On select a tab by pointer or key, set data-state and aria-selected on triggers, data-state on panels to active for the chosen pair, inactive for the rest. Also: move focus to the newly selected tab.
- Note: Selection follows focus. Disabled tabs are skipped, never focused.

### dropdown-menu

A menu anchored to a trigger.

- Root: `.ml-dropdown`
- Parts: trigger `.ml-dropdown-trigger`, menu `.ml-dropdown-menu`, item `.ml-dropdown-item`
- ARIA on trigger: `aria-haspopup` — menu; `aria-expanded` — true while open
- ARIA on menu: `role` — menu
- ARIA on item: `role` — menuitem; `data-highlighted` — present on the active item
- Keyboard:
  - <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>: Open the menu, then move the highlight.
  - <kbd>Enter</kbd> / <kbd>Space</kbd>: Activate the highlighted item.
  - <kbd>Escape</kbd>: Close and return focus to the trigger.
  - <kbd>Tab</kbd>: Close without activating.
- State changes:
  - On click the trigger, set data-state to open or closed.
  - On pointer over an item, set data-highlighted to that item only.
  - On pointer down outside the root, set data-state to closed.
- Note: Disabled items are skipped by the highlight and cannot be activated.

### select

A listbox behind a combobox trigger.

- Root: `.ml-select-root`
- Parts: trigger `.ml-select`, popover `.ml-select-popover`, list `.ml-select-list`, option `.ml-select-option`, search `.ml-select-search`
- ARIA on trigger: `role` — combobox; `aria-expanded` — true while open; `aria-controls` — id of the listbox; `aria-activedescendant` — id of the highlighted option while open
- ARIA on list: `role` — listbox; `aria-multiselectable` — true when multiple
- ARIA on option: `role` — option; `aria-selected` — true when chosen; `data-highlighted` — present on the active option
- Keyboard:
  - <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd>: Open, then move the highlight past disabled options.
  - <kbd>Enter</kbd> / <kbd>Space</kbd>: Choose the highlighted option. Space types when a search field has focus.
  - <kbd>Home</kbd> / <kbd>End</kbd>: Highlight the first or last enabled option.
  - <kbd>Escape</kbd>: Close and return focus to the trigger.
  - <kbd>Tab</kbd>: Close without choosing.
- State changes:
  - On choose an option, set aria-selected and data-state on options to checked for the chosen option. Also: single select closes and restores focus; multiple select stays open.

### modal

A dialog over the page that owns focus while open.

- Root: `.ml-modal`
- Parts: overlay `.ml-modal-overlay`, close `.ml-modal-close`
- ARIA on root: `role` — dialog; `aria-modal` — true; `aria-labelledby` — id of the title, or aria-label
- Keyboard:
  - <kbd>Escape</kbd>: Close, unless closing on Escape is disabled.
  - <kbd>Tab</kbd> / <kbd>Shift+Tab</kbd>: Cycle focus inside the dialog and never leave it.
- State changes:
  - On open, set focus to the first focusable element inside. Also: lock page scroll.
  - On close, set focus to the element that opened the dialog. Also: release page scroll.
  - On pointer down on the backdrop, set closed to unless closing on backdrop is disabled.
- Markup: `data-ml-opens` — on any control outside: the id of the dialog it opens; `data-ml-for` — on the overlay: the id of its dialog; `data-ml-close` — on any control inside that closes it, such as Cancel; `role="alertdialog"` — for a confirmation that interrupts

### sheet

A dialog anchored to one edge of the viewport.

- Root: `.ml-sheet-panel`
- Parts: overlay `.ml-sheet-overlay`, close `.ml-sheet-close`
- ARIA on root: `role` — dialog; `aria-modal` — true
- Keyboard:
  - <kbd>Escape</kbd>: Close, unless closing on Escape is disabled.
  - <kbd>Tab</kbd> / <kbd>Shift+Tab</kbd>: Cycle focus inside the panel.
- State changes:
  - On open, set focus to inside the panel. Also: lock page scroll.
  - On close, set focus to the trigger. Also: release page scroll.
- Markup: `data-ml-opens` — on any control outside: the id of the panel it opens; `data-ml-for` — on the overlay: the id of its panel; `data-ml-close` — on any control inside that closes it
- Note: Identical to modal apart from which edge it is anchored to.

### tooltip

A short label shown on hover or focus.

- Root: `.ml-tooltip-root`
- Parts: tooltip `.ml-tooltip`, arrow `.ml-tooltip-arrow`
- ARIA on tooltip: `role` — tooltip
- ARIA on trigger: `aria-describedby` — id of the tooltip while it is open
- Keyboard:
  - <kbd>Escape</kbd>: Hide the tooltip.
- State changes:
  - On pointer enter or focus the trigger, set visible to after the delay.
  - On pointer leave or blur, set hidden to immediately, canceling any pending delay.
- Note: Never put essential information or interactive content in a tooltip.

### toast

Transient messages in a live region.

- Root: `.ml-toaster`
- Parts: toast `.ml-toast`, action `.ml-toast-action`, close `.ml-toast-close`
- ARIA on root: `role` — region; `aria-label` — distinct per region, so several are distinguishable
- ARIA on toast: `role` — status for ordinary messages, alert for danger and warning; `aria-live` — polite, or assertive for danger and warning; `aria-busy` — true while it waits on work (a loading toast)
- Keyboard:
  - <kbd>Tab</kbd>: Reach the action and dismiss controls.
- State changes:
  - On push, set a toast into the region matching its position to visible.
  - On duration elapsed, set removed to unless the duration is zero.

### switch

An on/off control that is not a native checkbox.

- Root: `.ml-toggle`
- Parts: thumb `.ml-toggle-thumb`
- ARIA on root: `role` — switch; `aria-checked` — true or false
- Keyboard:
  - <kbd>Enter</kbd> / <kbd>Space</kbd>: Toggle.
- State changes:
  - On activate, set aria-checked and data-state to the opposite value.
- Note: Prefer a native checkbox unless the control genuinely reads as a switch.

### slider

A single value chosen from a range.

- Root: `.ml-slider-field`
- Parts: control `.ml-slider`, track `.ml-slider-track`, range `.ml-slider-range`, thumb `.ml-slider-thumb`
- ARIA on thumb: `role` — slider; `aria-valuenow` — current value; `aria-valuemin` — minimum; `aria-valuemax` — maximum; `tabindex` — 0 unless disabled
- Keyboard:
  - <kbd>ArrowRight</kbd> / <kbd>ArrowUp</kbd>: Increase by one step.
  - <kbd>ArrowLeft</kbd> / <kbd>ArrowDown</kbd>: Decrease by one step.
  - <kbd>Home</kbd> / <kbd>End</kbd>: Jump to the minimum or maximum.
  - <kbd>PageUp</kbd> / <kbd>PageDown</kbd>: Move by a larger step.
- State changes:
  - On pointer down on the track, or drag the thumb, set the value from the pointer position, snapped to the step to within min and max.

## If you are unsure

Prefer emitting less. A plain `<button class="ml-button">` is correct; a
button with a variant this document does not list is not. When a component
needs behavior, mark its root with `data-ml="<behavior name>"` and let the
runtime attach, rather than writing event handlers that guess at the contract.

---

# Accordion

> A collapsible content panel supporting single and multiple open modes.

- Tier: free, MIT
- Category: Layout
- Docs: https://ui.mlola.com/docs/components/accordion

## Install

```bash
npx mlola-ui add accordion
```

```tsx
import { Accordion } from "@/components/ui/accordion";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Accordion | `type` | `single`, `multiple` | `single` |

## Example

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion type="single" defaultValue="plans" collapsible>
      <AccordionItem value="plans">
        <AccordionTrigger>Is there a free plan?</AccordionTrigger>
        <AccordionContent>Yes. The open-source components are free forever.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="themes">
        <AccordionTrigger>Can I change themes later?</AccordionTrigger>
        <AccordionContent>Change data-theme on any ancestor. Nothing else moves.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## The same markup without React

```html
<div class="ml-accordion" data-ml="accordion">
  <article class="ml-accordion-item" data-state="open">
    <h3 class="ml-accordion-heading">
      <button id="t1" class="ml-accordion-trigger" data-state="open" aria-expanded="true" aria-controls="p1">
        <span>Is there a free plan?</span>
        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
      </button>
    </h3>
    <div id="p1" class="ml-accordion-panel" role="region" aria-labelledby="t1" data-state="open">
      <p>Yes. The components in the open-source registry are free forever.</p>
    </div>
  </article>
  <article class="ml-accordion-item" data-state="closed">
    <h3 class="ml-accordion-heading">
      <button id="t2" class="ml-accordion-trigger" data-state="closed" aria-expanded="false" aria-controls="p2">
        <span>Can I change themes later?</span>
        <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
      </button>
    </h3>
    <div id="p2" class="ml-accordion-panel" role="region" aria-labelledby="t2" data-state="closed" hidden>
      <p>Change data-theme on any ancestor. Nothing else moves.</p>
    </div>
  </article>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Alert

> A status banner with variants, dismiss action, and optional action slot.

- Tier: free, MIT
- Category: Feedback
- Docs: https://ui.mlola.com/docs/components/alert

## Install

```bash
npx mlola-ui add alert
```

```tsx
import { Alert } from "@/components/ui/alert";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Alert | `tone` | `neutral`, `info`, `success`, `warning`, `danger` | `neutral` |
| Alert | `variant` | `card`, `soft` | `card` |

## Example

```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert tone="warning">
      <AlertTitle>Your card expires soon</AlertTitle>
      <AlertDescription>Update it before September 30 to keep your plan.</AlertDescription>
    </Alert>
  );
}
```

## The same markup without React

```html
<div class="ml-alert" role="alert" data-tone="warning" data-variant="card" data-state="open">
  <span class="ml-alert-icon" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m10.3 3.8-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3.2l-8-14a2 2 0 0 0-3.4 0Z" pathLength="1"></path><path d="M12 9v4M12 17h.01" pathLength="1"></path></svg></span>
  <div class="ml-alert-content">
    <p class="ml-alert-title">Your card expires soon</p>
    <div class="ml-alert-description">Update it before September 30 to keep your plan.</div>
  </div>
</div>
```

---

# Avatar

> User avatar with image, initials fallback, and status indicator.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/avatar

## Install

```bash
npx mlola-ui add avatar
```

```tsx
import { Avatar } from "@/components/ui/avatar";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Avatar | `size` | `xs`, `sm`, `md`, `lg`, `xl` | `md` |
| Avatar | `status` | `online`, `offline`, `away`, `busy` |  |

## Example

```tsx
import { Avatar, AvatarGroup } from "@/components/ui/avatar";

export default function Example() {
  return (
    <AvatarGroup max={3}>
      <Avatar name="Lena Park" status="online" />
      <Avatar name="Kai Tanaka" />
      <Avatar name="Rin Sato" />
      <Avatar name="Omar Haddad" />
    </AvatarGroup>
  );
}
```

## The same markup without React

```html
<div class="ml-avatar-group" role="group" aria-label="Avatar group, 4 people">
  <span class="ml-avatar-group-item"><span class="ml-avatar-root" data-size="md"><span class="ml-avatar"><span class="ml-avatar-fallback" role="img" aria-label="Lena Park">LP</span></span><span class="ml-avatar-status" role="status" aria-label="Lena Park is online" data-status="online"></span></span></span>
  <span class="ml-avatar-group-item"><span class="ml-avatar-root" data-size="md"><span class="ml-avatar"><span class="ml-avatar-fallback" role="img" aria-label="Kai Tanaka">KT</span></span></span></span>
  <span class="ml-avatar-group-item"><span class="ml-avatar-root" data-size="md"><span class="ml-avatar"><span class="ml-avatar-fallback" role="img" aria-label="Rin Sato">RS</span></span></span></span>
  <span class="ml-avatar-overflow"><span aria-hidden="true">+1</span><span class="ml-visually-hidden">1 more person</span></span>
</div>
```

---

# Badge

> A small status or label badge with color variants, dot indicator, and removal.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/badge

## Install

```bash
npx mlola-ui add badge
```

```tsx
import { Badge } from "@/components/ui/badge";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Badge | `size` | `sm`, `md`, `lg` | `md` |
| Badge | `tone` | `neutral`, `primary`, `info`, `success`, `warning`, `danger` | `neutral` |
| Badge | `variant` | `soft`, `solid`, `outline` | `soft` |

## Example

```tsx
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="ml-cluster">
      <Badge>Draft</Badge>
      <Badge tone="success" dot>Live</Badge>
      <Badge tone="warning" variant="outline">Review</Badge>
      <Badge tone="danger" variant="solid">Failed</Badge>
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <span class="ml-badge" data-tone="neutral" data-variant="soft" data-size="md"><span class="ml-badge-label">Draft</span></span>
  <span class="ml-badge" data-tone="success" data-variant="soft" data-size="md"><span class="ml-badge-dot" aria-hidden="true"></span><span class="ml-badge-label">Live</span></span>
  <span class="ml-badge" data-tone="warning" data-variant="outline" data-size="md"><span class="ml-badge-label">Review</span></span>
  <span class="ml-badge" data-tone="danger" data-variant="solid" data-size="md"><span class="ml-badge-label">Failed</span></span>
</div>
```

---

# Breadcrumb

> Navigation breadcrumb trail with custom separators and responsive collapse.

- Tier: free, MIT
- Category: Navigation
- Docs: https://ui.mlola.com/docs/components/breadcrumb

## Install

```bash
npx mlola-ui add breadcrumb
```

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";
```

## Example

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";

export default function Example() {
  return (
    <Breadcrumb
      items={[
        { label: "Projects", href: "/projects" },
        { label: "Atlas", href: "/projects/atlas" },
        { label: "Settings" },
      ]}
    />
  );
}
```

## The same markup without React

```html
<nav class="ml-breadcrumb" aria-label="Breadcrumb">
  <ol class="ml-breadcrumb-list">
    <li class="ml-breadcrumb-item">
      <a class="ml-breadcrumb-link" data-hit="expand" href="/projects">Projects</a>
      <span class="ml-breadcrumb-separator" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></span>
    </li>
    <li class="ml-breadcrumb-item">
      <a class="ml-breadcrumb-link" data-hit="expand" href="/projects/atlas">Atlas</a>
      <span class="ml-breadcrumb-separator" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></span>
    </li>
    <li class="ml-breadcrumb-item">
      <span class="ml-breadcrumb-page" aria-current="page">Settings</span>
    </li>
  </ol>
</nav>
```

---

# Button

> A versatile button component with multiple variants, sizes, and states.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/button

## Install

```bash
npx mlola-ui add button
```

```tsx
import { Button } from "@/components/ui/button";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Button | `size` | `sm`, `md`, `lg`, `icon` | `md` |
| Button | `variant` | `primary`, `secondary`, `subtle`, `danger`, `outline`, `link` | `primary` |
| Button | `width` | `auto`, `full` | `auto` |

## Example

```tsx
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="ml-cluster">
      <Button>Save changes</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <button class="ml-button" type="button" data-variant="primary" data-size="md"><span class="ml-button-label">Save changes</span></button>
  <button class="ml-button" type="button" data-variant="secondary" data-size="md"><span class="ml-button-label">Cancel</span></button>
  <button class="ml-button" type="button" data-variant="danger" data-size="sm"><span class="ml-button-label">Delete</span></button>
</div>
```

---

# Card

> A compound card with header, content, and footer slots in four surface variants.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/card

## Install

```bash
npx mlola-ui add card
```

```tsx
import { Card } from "@/components/ui/card";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Card | `variant` | `default`, `elevated`, `glass`, `specular` | `default` |

## Example

```tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Team</CardTitle>
        <CardDescription>Four members, two pending invitations.</CardDescription>
      </CardHeader>
      <CardContent>Everyone can edit projects; only owners can change billing.</CardContent>
      <CardFooter>
        <Button size="sm">Invite</Button>
      </CardFooter>
    </Card>
  );
}
```

## The same markup without React

```html
<div class="ml-card" data-variant="default">
  <div class="ml-card-header">
    <h3 class="ml-card-title">Team</h3>
    <p class="ml-card-description">Four members, two pending invitations.</p>
  </div>
  <div class="ml-card-content">Everyone can edit projects; only owners can change billing.</div>
  <div class="ml-card-footer">
    <button class="ml-button" type="button" data-variant="primary" data-size="sm"><span class="ml-button-label">Invite</span></button>
  </div>
</div>
```

---

# Carousel

> One slide at a time with previous/next controls and a roving dot group.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/carousel

## Install

```bash
npx mlola-ui add carousel
```

```tsx
import { Carousel } from "@/components/ui/carousel";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Carousel | `indicators` | `dots`, `counter`, `none` | `dots` |

## Example

```tsx
import { Carousel } from "@/components/ui/carousel";

const slides = ["Plan", "Build", "Ship"].map((title) => (
  <div key={title} className="ml-card" data-variant="elevated">
    <div className="ml-card-content">{title}</div>
  </div>
));

export default function Example() {
  return <Carousel label="Release stages" items={slides} itemLabels={["Plan", "Build", "Ship"]} />;
}
```

## The same markup without React

```html
<div class="ml-carousel" role="group" aria-roledescription="carousel" aria-label="Release stages" data-arrows="true" style="--ml-carousel-per-view:1;--ml-carousel-peek:0px;--ml-carousel-min:0px;--ml-carousel-autoplay:0ms">
  <div class="ml-carousel-viewport">
    <div class="ml-carousel-track" tabindex="0" aria-label="Release stages, use the arrow keys">
      <div class="ml-carousel-slide" role="group" aria-roledescription="slide" aria-label="1 of 3: Plan" data-current="true">
        <div class="ml-card" data-variant="elevated"><div class="ml-card-content">Plan</div></div>
      </div>
      <div class="ml-carousel-slide" role="group" aria-roledescription="slide" aria-label="2 of 3: Build">
        <div class="ml-card" data-variant="elevated"><div class="ml-card-content">Build</div></div>
      </div>
      <div class="ml-carousel-slide" role="group" aria-roledescription="slide" aria-label="3 of 3: Ship">
        <div class="ml-card" data-variant="elevated"><div class="ml-card-content">Ship</div></div>
      </div>
    </div>
    <button class="ml-carousel-arrow" type="button" data-side="previous" aria-label="Previous slide"><svg class="mlola-glyph" width="1.1em" height="1.1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m15 18-6-6 6-6" pathLength="1"></path></svg></button>
    <button class="ml-carousel-arrow" type="button" data-side="next" aria-label="Next slide"><svg class="mlola-glyph" width="1.1em" height="1.1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></button>
  </div>
  <div class="ml-carousel-dots" role="group" aria-label="Choose release stages">
    <button class="ml-carousel-dot" type="button" data-hit="expand" aria-current="true" aria-label="Plan" tabindex="0"></button>
    <button class="ml-carousel-dot" type="button" data-hit="expand" aria-label="Build" tabindex="-1"></button>
    <button class="ml-carousel-dot" type="button" data-hit="expand" aria-label="Ship" tabindex="-1"></button>
  </div>
</div>
```

---

# Checkbox

> An accessible checkbox with label, description, error, and indeterminate state.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/checkbox

## Install

```bash
npx mlola-ui add checkbox
```

```tsx
import { Checkbox } from "@/components/ui/checkbox";
```

## Example

```tsx
import { Checkbox } from "@/components/ui/checkbox";

export default function Example() {
  return <Checkbox label="Email me about releases" description="At most once a month." defaultChecked />;
}
```

## The same markup without React

```html
<div class="ml-checkbox-field" data-state="checked">
  <label class="ml-checkbox-control" data-hit="expand"><input class="ml-checkbox-input" id="checkbox-1" type="checkbox" aria-checked="true" aria-describedby="checkbox-1-description" checked=""/><span class="ml-checkbox-indicator" aria-hidden="true"><svg class="mlola-glyph" width="0.75em" height="0.75em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="20 6 9 17 4 12" pathLength="1"></polyline></svg></span></label>
  <span class="ml-checkbox-copy"><label class="ml-checkbox-label" for="checkbox-1"><span class="ml-checkbox-text">Email me about releases</span></label><span class="ml-checkbox-description" id="checkbox-1-description">At most once a month.</span></span>
</div>
```

---

# Command Menu

> The ⌘K palette: ranked commands with shortcuts, keyboard navigation and matched letters bolded.

- Tier: free, MIT
- Category: Navigation
- Docs: https://ui.mlola.com/docs/components/command-menu

## Install

```bash
npx mlola-ui add command-menu
```

```tsx
import { CommandMenu } from "@/components/ui/command-menu";
```

## Example

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { CommandMenu } from "@/components/ui/command-menu";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Search commands</Button>
      <CommandMenu
        open={open}
        onOpenChange={setOpen}
        groups={[
          {
            heading: "Project",
            items: [
              { id: "new", label: "New project", shortcut: "mod+n", onSelect: () => setOpen(false) },
              { id: "invite", label: "Invite a teammate", onSelect: () => setOpen(false) },
            ],
          },
        ]}
      />
    </>
  );
}
```

## The same markup without React

```html
<button class="ml-button" type="button" data-variant="secondary" data-size="md"><span class="ml-button-label">Search commands</span></button>
```

---

# Dropdown Menu

> A keyboard-navigable dropdown menu with icons, shortcuts, and danger items.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/dropdown-menu

## Install

```bash
npx mlola-ui add dropdown-menu
```

```tsx
import { DropdownMenu } from "@/components/ui/dropdown-menu";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| DropdownMenu | `align` | `start`, `end` | `start` |

## Example

```tsx
import { DropdownMenu } from "@/components/ui/dropdown-menu";

export default function Example() {
  return (
    <DropdownMenu
      trigger="File"
      label="File"
      items={[
        { label: "New", shortcut: "⌘N" },
        { label: "Duplicate" },
        { label: "Delete", danger: true, separatorBefore: true },
      ]}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-dropdown" data-ml="dropdown-menu">
  <button class="ml-dropdown-trigger" type="button" aria-haspopup="menu" aria-expanded="false">
    <span class="ml-dropdown-trigger-label">File</span>
    <svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="ml-dropdown-menu" role="menu" aria-label="File" data-align="start" hidden>
    <button class="ml-dropdown-item" type="button" role="menuitem">New</button>
    <button class="ml-dropdown-item" type="button" role="menuitem">Open</button>
    <button class="ml-dropdown-item" type="button" role="menuitem" data-danger>Delete</button>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Dropzone

> Drop, choose or paste files; checked for type, size and count before they are handed over.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/dropzone

## Install

```bash
npx mlola-ui add dropzone
```

```tsx
import { Dropzone } from "@/components/ui/dropzone";
```

## Example

```tsx
"use client";

import * as React from "react";
import { Dropzone } from "@/components/ui/dropzone";

export default function Example() {
  const [files, setFiles] = React.useState<File[]>([]);
  return (
    <Dropzone
      label="Attachments"
      hint={files.length ? `${files.length} selected` : "PNG or PDF, up to 10 MB"}
      accept="image/png,application/pdf"
      maxSize={10 * 1024 * 1024}
      multiple
      onFiles={setFiles}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-dropzone-root">
  <div class="ml-input-field">
    <label class="ml-input-label" id="dropzone-1-label" for="dropzone-1">Attachments</label>
    <div class="ml-dropzone" id="dropzone-1" role="button" tabindex="0" aria-label="Attachments: drop files here, or press Enter to choose" aria-describedby="dropzone-1-hint">
      <span class="ml-dropzone-icon" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M12 15V3m-5 5 5-5 5 5M5 21h14" pathLength="1"></path></svg></span>
      <span class="ml-dropzone-title">Drop files here, or choose</span>
      <span class="ml-dropzone-rules">PNG, PDF · up to 10.0 MB</span>
      <input type="file" hidden="" accept="image/png,application/pdf" multiple=""/>
    </div>
    <p class="ml-input-hint" id="dropzone-1-hint">PNG or PDF, up to 10 MB</p>
  </div>
</div>
```

---

# Empty State

> What a screen says when there is nothing to show yet, and the way forward.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/empty-state

## Install

```bash
npx mlola-ui add empty-state
```

```tsx
import { EmptyState } from "@/components/ui/empty-state";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| EmptyState | `size` | `inline`, `page` | `inline` |

## Example

```tsx
import { IconMail } from "@mlola-ui/icons";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";

export default function Example() {
  return (
    <EmptyState
      icon={<IconMail size="1.5em" />}
      title="No messages yet"
      description="New conversations appear here."
      actions={<Button size="sm">Start one</Button>}
    />
  );
}
```

## The same markup without React

```html
<section class="ml-empty" data-size="inline">
  <span class="ml-empty-icon" aria-hidden="true"><svg class="mlola-glyph" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect x="3" y="5" width="18" height="14" rx="2" pathLength="1"></rect><path d="m4 7 8 6 8-6" pathLength="1"></path></svg></span>
  <h3 class="ml-empty-title">No messages yet</h3>
  <p class="ml-empty-description">New conversations appear here.</p>
  <div class="ml-empty-actions">
    <button class="ml-button" type="button" data-variant="primary" data-size="sm"><span class="ml-button-label">Start one</span></button>
  </div>
</section>
```

---

# Input

> Text input with variants, sizes, label, hint, and error states.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/input

## Install

```bash
npx mlola-ui add input
```

```tsx
import { Field } from "@/components/ui/input";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Input | `size` | `sm`, `md`, `lg` | `md` |
| Input | `variant` | `default`, `filled`, `subtle` | `default` |

## Example

```tsx
import { Input } from "@/components/ui/input";

export default function Example() {
  return <Input label="Email" type="email" placeholder="you@company.com" hint="We never share it." />;
}
```

## The same markup without React

```html
<div class="ml-input-field">
  <label class="ml-input-label" id="input-1-label" for="input-1">Email</label>
  <div class="ml-input-control">
    <input class="ml-input" id="input-1" aria-describedby="input-1-hint" data-variant="default" data-size="md" type="email" placeholder="you@company.com"/>
  </div>
  <p class="ml-input-hint" id="input-1-hint">We never share it.</p>
</div>
```

---

# Kbd

> Keys and platform-aware shortcuts: mod+k reads ⌘K on a Mac and Ctrl K elsewhere, spoken as words.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/kbd

## Install

```bash
npx mlola-ui add kbd
```

```tsx
import { Kbd } from "@/components/ui/kbd";
```

## Example

```tsx
import { Kbd, Shortcut } from "@/components/ui/kbd";

export default function Example() {
  return (
    <p>
      Press <Shortcut keys="mod+k" /> to search, or <Kbd>Esc</Kbd> to close.
    </p>
  );
}
```

## The same markup without React

```html
<p>Press <kbd class="ml-shortcut"><kbd class="ml-kbd" aria-hidden="true">⌘</kbd><kbd class="ml-kbd" aria-hidden="true">K</kbd><span class="ml-visually-hidden">Command K</span></kbd> to search, or <kbd class="ml-kbd">Esc</kbd> to close.</p>
```

---

# Modal

> Accessible dialog overlay with focus trap, escape handling, and scroll lock.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/modal

## Install

```bash
npx mlola-ui add modal
```

```tsx
import { Modal } from "@/components/ui/modal";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Modal | `size` | `sm`, `md`, `lg`, `xl`, `full` | `md` |

## Example

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Modal, ModalBody, ModalFooter, ModalHeader } from "@/components/ui/modal";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>Delete project</Button>
      <Modal open={open} onClose={close} size="sm" role="alertdialog">
        <ModalHeader title="Delete project" onClose={close} />
        <ModalBody>This removes the project and every deployment attached to it.</ModalBody>
        <ModalFooter>
          <Button variant="secondary" onClick={close}>Keep it</Button>
          <Button variant="danger" onClick={close}>Delete</Button>
        </ModalFooter>
      </Modal>
    </>
  );
}
```

## The same markup without React

```html
<button class="ml-button" type="button" data-variant="danger" data-ml-opens="delete-project">
  <span class="ml-button-label">Delete project</span>
</button>

<div class="ml-modal-overlay" data-ml-for="delete-project" hidden></div>
<div class="ml-modal" id="delete-project" data-ml="modal" role="alertdialog" aria-modal="true" aria-labelledby="delete-project-title" data-size="sm" tabindex="-1" hidden>
  <div class="ml-modal-header">
    <h2 class="ml-modal-title" id="delete-project-title">Delete project</h2>
    <button class="ml-modal-close" type="button" aria-label="Close dialog"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
  <div class="ml-modal-body">This removes the project and every deployment attached to it.</div>
  <div class="ml-modal-footer">
    <button class="ml-button" type="button" data-variant="secondary" data-ml-close><span class="ml-button-label">Keep it</span></button>
    <button class="ml-button" type="button" data-variant="danger"><span class="ml-button-label">Delete</span></button>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# OTP Input

> A one-time code as separate boxes that type, delete, paste and autofill like one field.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/otp-input

## Install

```bash
npx mlola-ui add otp-input
```

```tsx
import { OtpInput } from "@/components/ui/otp-input";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| OtpInput | `mode` | `numeric`, `alphanumeric` | `numeric` |

## Example

```tsx
import { OtpInput } from "@/components/ui/otp-input";

export default function Example() {
  return <OtpInput label="Verification code" hint="Sent to your email." length={6} />;
}
```

## The same markup without React

```html
<div class="ml-input-field">
  <label class="ml-input-label" id="otp-1-label" for="otp-1">Verification code</label>
  <div class="ml-otp" role="group" aria-labelledby="otp-1-label">
    <input class="ml-otp-box" id="otp-1" inputMode="numeric" autoComplete="one-time-code" aria-label="Digit 1 of 6" aria-describedby="otp-1-hint" maxLength="6" value=""/>
    <input class="ml-otp-box" inputMode="numeric" autoComplete="off" aria-label="Digit 2 of 6" maxLength="1" value=""/>
    <input class="ml-otp-box" inputMode="numeric" autoComplete="off" aria-label="Digit 3 of 6" maxLength="1" value=""/>
    <input class="ml-otp-box" inputMode="numeric" autoComplete="off" aria-label="Digit 4 of 6" maxLength="1" value=""/>
    <input class="ml-otp-box" inputMode="numeric" autoComplete="off" aria-label="Digit 5 of 6" maxLength="1" value=""/>
    <input class="ml-otp-box" inputMode="numeric" autoComplete="off" aria-label="Digit 6 of 6" maxLength="1" value=""/>
  </div>
  <p class="ml-input-hint" id="otp-1-hint">Sent to your email.</p>
</div>
```

---

# Pagination

> Page navigation with prev/next, page numbers, and ellipsis for large ranges.

- Tier: free, MIT
- Category: Navigation
- Docs: https://ui.mlola.com/docs/components/pagination

## Install

```bash
npx mlola-ui add pagination
```

```tsx
import { Pagination } from "@/components/ui/pagination";
```

## Example

```tsx
"use client";

import * as React from "react";
import { Pagination } from "@/components/ui/pagination";

export default function Example() {
  const [page, setPage] = React.useState(3);
  return <Pagination currentPage={page} totalPages={12} onPageChange={setPage} />;
}
```

## The same markup without React

```html
<nav class="ml-pagination" aria-label="Pagination">
  <ol class="ml-pagination-list">
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to previous page"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m15 18-6-6 6-6" pathLength="1"></path></svg><span class="ml-pagination-button-label">Previous</span></button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 1" data-state="inactive">1</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 2" data-state="inactive">2</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 3" aria-current="page" data-state="active">3</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 4" data-state="inactive">4</button>
    </li>
    <li><span class="ml-pagination-ellipsis" aria-hidden="true">…</span></li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to page 12" data-state="inactive">12</button>
    </li>
    <li>
      <button class="ml-pagination-button" type="button" aria-label="Go to next page"><span class="ml-pagination-button-label">Next</span><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></button>
    </li>
  </ol>
</nav>
```

---

# Popover

> A non-modal layer anchored to its trigger that flips and shifts to stay on screen.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/popover

## Install

```bash
npx mlola-ui add popover
```

```tsx
import { Popover } from "@/components/ui/popover";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Popover | `align` | `start`, `center`, `end` | `start` |
| Popover | `side` | `top`, `bottom`, `left`, `right` | `bottom` |

## Example

```tsx
import { Button } from "@/components/ui/button";
import { Popover } from "@/components/ui/popover";

export default function Example() {
  return (
    <Popover label="Share" trigger={<Button variant="secondary">Share</Button>}>
      <p>Anyone with the link can view this page.</p>
    </Popover>
  );
}
```

## The same markup without React

```html
<button class="ml-button" type="button" data-variant="secondary" data-size="md" aria-haspopup="dialog" aria-expanded="false"><span class="ml-button-label">Share</span></button>
```

---

# Progress

> Horizontal and circular progress indicators with variants and indeterminate mode.

- Tier: free, MIT
- Category: Feedback
- Docs: https://ui.mlola.com/docs/components/progress

## Install

```bash
npx mlola-ui add progress
```

```tsx
import { Progress } from "@/components/ui/progress";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Progress | `size` | `sm`, `md`, `lg` | `md` |
| Progress | `tone` | `primary`, `info`, `success`, `warning`, `danger` | `primary` |
| CircularProgress | `size` | `sm`, `md`, `lg` | `md` |
| CircularProgress | `tone` | `primary`, `info`, `success`, `warning`, `danger` | `primary` |

## Example

```tsx
import { Progress } from "@/components/ui/progress";

export default function Example() {
  return <Progress value={64} label="Uploading" showLabel />;
}
```

## The same markup without React

```html
<div class="ml-progress-root" data-tone="primary" data-size="md" data-state="determinate">
  <div class="ml-progress-label">
    <span>Uploading</span>
    <span class="ml-progress-value" aria-hidden="true">0%</span>
  </div>
  <div class="ml-progress-track" role="progressbar" aria-label="Uploading" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" aria-valuetext="64%">
    <div class="ml-progress-fill" aria-hidden="true" style="width:64%"></div>
  </div>
</div>
```

---

# Radio Group

> A native radio group with vertical and horizontal orientations.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/radio-group

## Install

```bash
npx mlola-ui add radio-group
```

```tsx
import { RadioGroup } from "@/components/ui/radio-group";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| RadioGroup | `orientation` | `horizontal`, `vertical` | `vertical` |

## Example

```tsx
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Example() {
  return (
    <RadioGroup label="Billing" defaultValue="yearly" name="billing">
      <RadioGroupItem value="monthly" label="Monthly" />
      <RadioGroupItem value="yearly" label="Yearly" description="Two months free." />
    </RadioGroup>
  );
}
```

## The same markup without React

```html
<div class="ml-radio-group" role="radiogroup" aria-labelledby="billing-label" aria-orientation="vertical" data-orientation="vertical">
  <div class="ml-radio-group-label" id="billing-label">Billing</div>
  <div class="ml-radio-group-items">
    <label class="ml-radio-item" for="billing-1" data-state="unchecked"><span class="ml-radio-control"><input class="ml-radio-input" id="billing-1" type="radio" name="billing" value="monthly"/><span class="ml-radio-indicator" aria-hidden="true"></span></span><span class="ml-radio-copy"><span class="ml-radio-label">Monthly</span></span></label>
    <label class="ml-radio-item" for="billing-2" data-state="checked"><span class="ml-radio-control"><input class="ml-radio-input" id="billing-2" type="radio" aria-describedby="billing-2-description" name="billing" checked="" value="yearly"/><span class="ml-radio-indicator" aria-hidden="true"></span></span><span class="ml-radio-copy"><span class="ml-radio-label">Yearly</span><span class="ml-radio-description" id="billing-2-description">Two months free.</span></span></label>
  </div>
</div>
```

---

# Rating

> Star rating with exact fractional fill and optional review count.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/rating

## Install

```bash
npx mlola-ui add rating
```

```tsx
import { Rating } from "@/components/ui/rating";
```

## Example

```tsx
import { Rating } from "@/components/ui/rating";

export default function Example() {
  return <Rating value={4.5} count={128} showValue label="Average rating" />;
}
```

## The same markup without React

```html
<span class="ml-rating" role="img" aria-label="Average rating"><span class="ml-rating-track" aria-hidden="true"><span class="ml-rating-fill" style="--ml-rating:90%">★★★★★</span>★★★★★</span><span class="ml-rating-value">4.5</span><span class="ml-rating-count">(128)</span></span>
```

---

# Resizable

> Two panes and a keyboard-accessible handle between them.

- Tier: free, MIT
- Category: Layout
- Docs: https://ui.mlola.com/docs/components/resizable

## Install

```bash
npx mlola-ui add resizable
```

```tsx
import { Resizable } from "@/components/ui/resizable";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Resizable | `anchor` | `first`, `second` | `first` |
| Resizable | `direction` | `horizontal`, `vertical` | `horizontal` |
| Resizable | `units` | `percent`, `pixels` | `percent` |

## Example

```tsx
import { Resizable } from "@/components/ui/resizable";

export default function Example() {
  return (
    <div style={{ height: 200 }}>
      <Resizable
        label="Resize sidebar"
        defaultSize={30}
        min={20}
        max={50}
        first={<nav>Files</nav>}
        second={<main>Editor</main>}
      />
    </div>
  );
}
```

## The same markup without React

```html
<div style="height:200px">
  <div class="ml-resizable" data-direction="horizontal" data-anchor="first" style="--ml-resizable-size:30%">
    <div class="ml-resizable-pane"><nav>Files</nav></div>
    <div class="ml-resizable-handle" role="separator" tabindex="0" aria-label="Resize sidebar" aria-orientation="vertical" aria-valuemin="20" aria-valuemax="50" aria-valuenow="30"></div>
    <div class="ml-resizable-pane"><main>Editor</main></div>
  </div>
</div>
```

---

# Segmented Control

> Single-choice control that swaps between a small set of options.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/segmented-control

## Install

```bash
npx mlola-ui add segmented-control
```

```tsx
import { SegmentedControl } from "@/components/ui/segmented-control";
```

## Example

```tsx
import { SegmentedControl } from "@/components/ui/segmented-control";

export default function Example() {
  return (
    <SegmentedControl
      label="View"
      defaultValue="board"
      options={[
        { value: "list", label: "List" },
        { value: "board", label: "Board" },
        { value: "calendar", label: "Calendar" },
      ]}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-segmented-control" role="radiogroup" aria-label="View">
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="false" data-state="inactive" tabindex="-1">List</button>
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="true" data-state="active" tabindex="0">Board</button>
  <button class="ml-segmented-control-item" type="button" role="radio" aria-checked="false" data-state="inactive" tabindex="-1">Calendar</button>
</div>
```

---

# Select

> Custom searchable dropdown with option groups, keyboard navigation, and clearing.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/select

## Install

```bash
npx mlola-ui add select
```

```tsx
import { Select } from "@/components/ui/select";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Select | `size` | `sm`, `md`, `lg` |  |

## Example

```tsx
import { Select } from "@/components/ui/select";

export default function Example() {
  return (
    <Select
      label="Region"
      placeholder="Choose a region"
      defaultValue="eu"
      options={[
        { value: "us", label: "United States" },
        { value: "eu", label: "Europe" },
        { value: "ap", label: "Asia Pacific" },
      ]}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-select-root" data-ml="select">
  <span class="ml-select-label" id="fruit-label">Fruit</span>
  <div class="ml-select-control">
    <button class="ml-select" type="button" role="combobox" aria-expanded="false" aria-controls="fruit-list" aria-labelledby="fruit-label" data-state="closed">
      <span class="ml-select-value" data-placeholder>Select…</span>
      <span class="ml-select-chevron" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"/></svg></span>
    </button>
  </div>
  <div class="ml-select-popover" hidden>
    <ul class="ml-select-list" id="fruit-list" role="listbox" aria-labelledby="fruit-label">
      <li class="ml-select-option" id="opt-apple" role="option" aria-selected="false" data-state="unchecked">Apple</li>
      <li class="ml-select-option" id="opt-pear" role="option" aria-selected="false" data-state="unchecked">Pear</li>
      <li class="ml-select-option" id="opt-durian" role="option" aria-selected="false" aria-disabled="true" data-state="unchecked">Durian</li>
    </ul>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Sheet

> A slide-over panel from any screen edge with header, body, and footer sections.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/sheet

## Install

```bash
npx mlola-ui add sheet
```

```tsx
import { Sheet } from "@/components/ui/sheet";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Sheet | `side` | `left`, `right`, `top`, `bottom` | `right` |
| Sheet | `size` | `sm`, `md`, `lg` | `md` |

## Example

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetBody, SheetFooter } from "@/components/ui/sheet";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Settings</Button>
      <Sheet open={open} onClose={close} title="Account settings" description="Changes apply instantly.">
        <SheetBody>Escape closes the panel, and so does the backdrop.</SheetBody>
        <SheetFooter>
          <Button onClick={close}>Done</Button>
        </SheetFooter>
      </Sheet>
    </>
  );
}
```

## The same markup without React

```html
<button class="ml-button" type="button" data-variant="secondary" data-ml-opens="account-settings">
  <span class="ml-button-label">Settings</span>
</button>

<div class="ml-sheet-overlay" data-ml-for="account-settings" hidden></div>
<div class="ml-sheet-panel" id="account-settings" data-ml="sheet" role="dialog" aria-modal="true" aria-labelledby="account-settings-title" data-side="right" data-size="md" tabindex="-1" hidden>
  <div class="ml-sheet-header">
    <div class="ml-sheet-heading">
      <h2 class="ml-sheet-title" id="account-settings-title">Account settings</h2>
      <p class="ml-sheet-description">Changes apply instantly.</p>
    </div>
    <button class="ml-sheet-close" type="button" aria-label="Close panel"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
  <div class="ml-sheet-body">
    <p>Escape closes the panel, and so does the backdrop.</p>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Skeleton

> Shimmering loading placeholders for text, avatars, and cards.

- Tier: free, MIT
- Category: Feedback
- Docs: https://ui.mlola.com/docs/components/skeleton

## Install

```bash
npx mlola-ui add skeleton
```

```tsx
import { Skeleton } from "@/components/ui/skeleton";
```

## Example

```tsx
import { SkeletonAvatar, SkeletonRegion, SkeletonText } from "@/components/ui/skeleton";

export default function Example() {
  return (
    <SkeletonRegion label="Loading profile">
      <div className="ml-cluster">
        <SkeletonAvatar size={40} />
        <SkeletonText lines={2} />
      </div>
    </SkeletonRegion>
  );
}
```

## The same markup without React

```html
<div class="ml-skeleton-region" role="status" aria-busy="true">
  <span class="ml-visually-hidden">Loading profile</span>
  <div class="ml-cluster">
    <div class="ml-skeleton ml-skeleton-avatar" aria-hidden="true" style="width:40px;height:40px;border-radius:50%"></div>
    <div class="ml-skeleton-text" aria-hidden="true">
      <div class="ml-skeleton ml-skeleton-line" data-rounded=""></div>
      <div class="ml-skeleton ml-skeleton-line" data-rounded=""></div>
    </div>
  </div>
</div>
```

---

# Slider

> An accessible single-value slider with keyboard support and pointer dragging.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/slider

## Install

```bash
npx mlola-ui add slider
```

```tsx
import { Slider } from "@/components/ui/slider";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Slider | `size` | `sm`, `md` | `md` |

## Example

```tsx
import { Slider } from "@/components/ui/slider";

export default function Example() {
  return <Slider label="Volume" defaultValue={40} step={5} showValue />;
}
```

## The same markup without React

```html
<div class="ml-slider-field" data-ml="slider" data-size="md" data-ml-step="5">
  <div class="ml-slider-header">
    <span class="ml-slider-label" id="bright-label">Brightness</span>
    <span class="ml-slider-output">40</span>
  </div>
  <div class="ml-slider">
    <div class="ml-slider-track">
      <span class="ml-slider-range" style="width: 40%"></span>
      <span class="ml-slider-thumb" id="bright-thumb" role="slider" tabindex="0"
            aria-labelledby="bright-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"
            style="left: 40%"></span>
    </div>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Table

> A compositional data table with sortable columns, striped rows, density sizes, and footer totals.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/table

## Install

```bash
npx mlola-ui add table
```

```tsx
import { Table } from "@/components/ui/table";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Table | `size` | `sm`, `md` | `md` |
| TableHead | `align` | `left`, `center`, `right` | `left` |
| TableCell | `align` | `left`, `center`, `right` | `left` |

## Example

```tsx
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

const invoices = [
  { id: "INV-104", status: "Paid", amount: "$240.00" },
  { id: "INV-105", status: "Open", amount: "$1,120.00" },
];

export default function Example() {
  return (
    <Table>
      <TableCaption>Recent invoices</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead align="right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.id}>
            <TableCell>{invoice.id}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell numeric>{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}
```

## The same markup without React

```html
<div class="ml-table-container">
  <table class="ml-table" data-size="md">
    <caption class="ml-table-caption">Recent invoices</caption>
    <thead class="ml-table-header">
      <tr class="ml-table-row">
        <th class="ml-table-head" scope="col" data-align="left">Invoice</th>
        <th class="ml-table-head" scope="col" data-align="left">Status</th>
        <th class="ml-table-head" scope="col" data-align="right">Amount</th>
      </tr>
    </thead>
    <tbody class="ml-table-body">
      <tr class="ml-table-row">
        <td class="ml-table-cell" data-align="left">INV-104</td>
        <td class="ml-table-cell" data-align="left">Paid</td>
        <td class="ml-table-cell" data-align="right" data-numeric="">$240.00</td>
      </tr>
      <tr class="ml-table-row">
        <td class="ml-table-cell" data-align="left">INV-105</td>
        <td class="ml-table-cell" data-align="left">Open</td>
        <td class="ml-table-cell" data-align="right" data-numeric="">$1,120.00</td>
      </tr>
    </tbody>
  </table>
</div>
```

---

# Tabs

> Tabbed interface with underline, pills, and enclosed variants.

- Tier: free, MIT
- Category: Navigation
- Docs: https://ui.mlola.com/docs/components/tabs

## Install

```bash
npx mlola-ui add tabs
```

```tsx
import { Tabs } from "@/components/ui/tabs";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Tabs | `orientation` | `horizontal`, `vertical` | `horizontal` |
| Tabs | `variant` | `default`, `pills`, `enclosed` | `default` |

## Example

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Example() {
  return (
    <Tabs defaultValue="overview">
      <TabsList aria-label="Project">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Everything at a glance.</TabsContent>
      <TabsContent value="activity">Who changed what, and when.</TabsContent>
      <TabsContent value="settings">Names, members and billing.</TabsContent>
    </Tabs>
  );
}
```

## The same markup without React

```html
<div class="ml-tabs" data-ml="tabs" data-variant="default" data-orientation="horizontal">
  <div class="ml-tabs-list" role="tablist" aria-label="Project" aria-orientation="horizontal">
    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-a" aria-controls="panel-a" aria-selected="true" data-state="active" tabindex="0">Overview</button>
    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-b" aria-controls="panel-b" aria-selected="false" data-state="inactive" tabindex="-1">Activity</button>
    <button class="ml-tabs-trigger" type="button" role="tab" id="tab-c" aria-controls="panel-c" aria-selected="false" data-state="inactive" tabindex="-1">Settings</button>
  </div>
  <div class="ml-tabs-content" role="tabpanel" id="panel-a" aria-labelledby="tab-a" tabindex="0" data-state="active">Overview panel</div>
  <div class="ml-tabs-content" role="tabpanel" id="panel-b" aria-labelledby="tab-b" tabindex="0" data-state="inactive" hidden>Activity panel</div>
  <div class="ml-tabs-content" role="tabpanel" id="panel-c" aria-labelledby="tab-c" tabindex="0" data-state="inactive" hidden>Settings panel</div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Textarea

> Multi-line text that grows as it is written, with a counter near its limit.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/textarea

## Install

```bash
npx mlola-ui add textarea
```

```tsx
import { Textarea } from "@/components/ui/textarea";
```

## Example

```tsx
import { Textarea } from "@/components/ui/textarea";

export default function Example() {
  return <Textarea label="Feedback" hint="What would make this better?" maxLength={280} showCount rows={3} />;
}
```

## The same markup without React

```html
<div class="ml-input-field">
  <label class="ml-input-label" id="textarea-1-label" for="textarea-1">Feedback</label>
  <textarea class="ml-textarea" id="textarea-1" rows="3" maxLength="280" aria-describedby="textarea-1-hint" style="--ml-textarea-max-rows:12"></textarea>
  <p class="ml-textarea-count" aria-live="polite">0 / 280</p>
  <p class="ml-input-hint" id="textarea-1-hint">What would make this better?</p>
</div>
```

---

# Timeline

> A vertical event timeline with status dots, timestamps, and custom icon nodes.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/timeline

## Install

```bash
npx mlola-ui add timeline
```

```tsx
import { Timeline } from "@/components/ui/timeline";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| TimelineItem | `status` | `complete`, `current`, `upcoming` | `upcoming` |
| TimelineItem | `tone` | `neutral`, `primary`, `info`, `success`, `warning`, `danger` |  |
| TimelineDot | `status` | `complete`, `current`, `upcoming` | `upcoming` |

## Example

```tsx
import { Timeline, TimelineItem } from "@/components/ui/timeline";

export default function Example() {
  return (
    <Timeline>
      <TimelineItem status="complete" title="Order placed" time="Sep 12" dateTime="2026-09-12" />
      <TimelineItem status="current" title="Shipped" time="Sep 14" dateTime="2026-09-14" description="In transit to the local hub." />
      <TimelineItem status="upcoming" title="Delivered" />
    </Timeline>
  );
}
```

## The same markup without React

```html
<ol class="ml-timeline">
  <li class="ml-timeline-item" data-status="complete">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="complete"><svg class="mlola-glyph" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="20 6 9 17 4 12" pathLength="1"></polyline></svg></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading">
        <p class="ml-timeline-title">Order placed</p>
        <time class="ml-timeline-time" dateTime="2026-09-12">Sep 12</time>
      </div>
    </div>
  </li>
  <li class="ml-timeline-item" data-status="current" aria-current="step">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="current"><span class="ml-timeline-pulse"></span></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading">
        <p class="ml-timeline-title">Shipped</p>
        <time class="ml-timeline-time" dateTime="2026-09-14">Sep 14</time>
      </div>
      <p class="ml-timeline-description">In transit to the local hub.</p>
    </div>
  </li>
  <li class="ml-timeline-item" data-status="upcoming">
    <span class="ml-timeline-marker" aria-hidden="true" data-status="upcoming"></span>
    <div class="ml-timeline-body">
      <div class="ml-timeline-heading"><p class="ml-timeline-title">Delivered</p></div>
    </div>
  </li>
</ol>
```

---

# Toast

> Toast notification system with an imperative API, auto-dismiss, and stacking.

- Tier: free, MIT
- Category: Feedback
- Docs: https://ui.mlola.com/docs/components/toast

## Install

```bash
npx mlola-ui add toast
```

```tsx
import { Toaster } from "@/components/ui/toast";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Toaster | `position` | `top-right`, `top-center`, `bottom-right`, `bottom-center` | `top-right` |

## Example

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Toaster, toast } from "@/components/ui/toast";

export default function Example() {
  return (
    <>
      <Button onClick={() => toast.success("Draft saved to your workspace.")}>Save draft</Button>
      <Toaster />
    </>
  );
}
```

## The same markup without React

```html
<div class="ml-toaster" data-ml="toast" role="region" aria-label="Notifications" data-position="top-right">
  <div class="ml-toast" role="status" aria-live="polite" aria-atomic="true" data-tone="success" data-ml-duration="6000">
    <div class="ml-toast-content">
      <p class="ml-toast-message">Draft saved to your workspace.</p>
    </div>
    <button class="ml-toast-close" type="button" aria-label="Dismiss notification"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
</div>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Toggle

> iOS-style switch and button-style toggle with controlled and uncontrolled modes.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/toggle

## Install

```bash
npx mlola-ui add toggle
```

```tsx
import { Switch } from "@/components/ui/toggle";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Switch | `size` | `sm`, `md`, `lg` | `md` |
| Toggle | `size` | `sm`, `md`, `lg` | `md` |

## Example

```tsx
import { Switch } from "@/components/ui/toggle";

export default function Example() {
  return <Switch label="Email notifications" defaultChecked />;
}
```

## The same markup without React

```html
<span class="ml-switch-field">
  <button class="ml-toggle" type="button" data-ml="switch" role="switch" aria-checked="false" aria-labelledby="notify-label" data-state="unchecked" data-size="md" data-hit="expand">
    <span class="ml-toggle-thumb" aria-hidden="true"></span>
  </button>
  <span class="ml-switch-label" id="notify-label">Email notifications</span>
</span>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Tooltip

> Hover and focus tooltip with four placements, delay, and arrow.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/tooltip

## Install

```bash
npx mlola-ui add tooltip
```

```tsx
import { Tooltip } from "@/components/ui/tooltip";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Tooltip | `placement` | `top`, `bottom`, `left`, `right` | `top` |

## Example

```tsx
import { Button } from "@/components/ui/button";
import { Tooltip } from "@/components/ui/tooltip";

export default function Example() {
  return (
    <Tooltip content="Copy a link to this page">
      <Button variant="secondary" size="sm">Share</Button>
    </Tooltip>
  );
}
```

## The same markup without React

```html
<span class="ml-tooltip-root" data-ml="tooltip">
  <button class="ml-button" type="button" data-variant="secondary" data-size="sm"><span class="ml-button-label">Share</span></button>
  <span class="ml-tooltip" id="share-tip" role="tooltip" data-side="top" hidden>
    Copy a link to this page
    <span class="ml-tooltip-arrow" aria-hidden="true"></span>
  </span>
</span>
```

Load `@mlola-ui/behavior` and call `observe()` to give this markup its keyboard and state handling.

---

# Activity Heatmap

> Activity by day in GitHub's calendar grid, with quantile shading, a keyboard grid and hover detail.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/activity-heatmap

## Install

```bash
npx mlola-ui add activity-heatmap
```

```tsx
import { ActivityHeatmap } from "@/components/ui/activity-heatmap";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ActivityHeatmap | `tone` | `primary`, `info`, `success`, `warning` | `primary` |

## Example

```tsx
import { ActivityHeatmap } from "@/components/ui/activity-heatmap";

// Counts by day; days not listed count as zero.
const data = [
  { date: "2026-09-21", count: 3 },
  { date: "2026-09-22", count: 7 },
  { date: "2026-09-24", count: 1 },
  { date: "2026-09-25", count: 12 },
];

export default function Example() {
  return <ActivityHeatmap data={data} end="2026-09-26" weeks={8} unit="commit" label="Commits in the last eight weeks" />;
}
```

## The same markup without React

```html
<div class="ml-heatmap" data-tone="primary" style="--ml-heatmap-weeks:8">
  <div class="ml-heatmap-grid" role="grid" aria-label="Commits in the last eight weeks" aria-readonly="true">
    <div class="ml-heatmap-months" aria-hidden="true">
      <span class="ml-heatmap-month" style="grid-column:2">Aug</span>
      <span class="ml-heatmap-month" style="grid-column:7">Sep</span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:2"><span>Mon</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, August 3, 2026" tabindex="-1" style="grid-column:2;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, August 10, 2026" tabindex="-1" style="grid-column:3;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, August 17, 2026" tabindex="-1" style="grid-column:4;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, August 24, 2026" tabindex="-1" style="grid-column:5;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, August 31, 2026" tabindex="-1" style="grid-column:6;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, September 7, 2026" tabindex="-1" style="grid-column:7;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Monday, September 14, 2026" tabindex="-1" style="grid-column:8;grid-row:2"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="1" aria-label="3 commit on Monday, September 21, 2026" tabindex="-1" style="grid-column:9;grid-row:2"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:3"><span aria-hidden="true" data-hidden="true">Tue</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, August 4, 2026" tabindex="-1" style="grid-column:2;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, August 11, 2026" tabindex="-1" style="grid-column:3;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, August 18, 2026" tabindex="-1" style="grid-column:4;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, August 25, 2026" tabindex="-1" style="grid-column:5;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, September 1, 2026" tabindex="-1" style="grid-column:6;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, September 8, 2026" tabindex="-1" style="grid-column:7;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Tuesday, September 15, 2026" tabindex="-1" style="grid-column:8;grid-row:3"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="2" aria-label="7 commit on Tuesday, September 22, 2026" tabindex="-1" style="grid-column:9;grid-row:3"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:4"><span>Wed</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, August 5, 2026" tabindex="-1" style="grid-column:2;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, August 12, 2026" tabindex="-1" style="grid-column:3;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, August 19, 2026" tabindex="-1" style="grid-column:4;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, August 26, 2026" tabindex="-1" style="grid-column:5;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, September 2, 2026" tabindex="-1" style="grid-column:6;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, September 9, 2026" tabindex="-1" style="grid-column:7;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, September 16, 2026" tabindex="-1" style="grid-column:8;grid-row:4"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Wednesday, September 23, 2026" tabindex="-1" style="grid-column:9;grid-row:4"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:5"><span aria-hidden="true" data-hidden="true">Thu</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, August 6, 2026" tabindex="-1" style="grid-column:2;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, August 13, 2026" tabindex="-1" style="grid-column:3;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, August 20, 2026" tabindex="-1" style="grid-column:4;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, August 27, 2026" tabindex="-1" style="grid-column:5;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, September 3, 2026" tabindex="-1" style="grid-column:6;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, September 10, 2026" tabindex="-1" style="grid-column:7;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Thursday, September 17, 2026" tabindex="-1" style="grid-column:8;grid-row:5"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="1" aria-label="1 commit on Thursday, September 24, 2026" tabindex="-1" style="grid-column:9;grid-row:5"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:6"><span>Fri</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, August 7, 2026" tabindex="-1" style="grid-column:2;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, August 14, 2026" tabindex="-1" style="grid-column:3;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, August 21, 2026" tabindex="-1" style="grid-column:4;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, August 28, 2026" tabindex="-1" style="grid-column:5;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, September 4, 2026" tabindex="-1" style="grid-column:6;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, September 11, 2026" tabindex="-1" style="grid-column:7;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Friday, September 18, 2026" tabindex="-1" style="grid-column:8;grid-row:6"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="3" aria-label="12 commit on Friday, September 25, 2026" tabindex="-1" style="grid-column:9;grid-row:6"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:7"><span aria-hidden="true" data-hidden="true">Sat</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, August 8, 2026" tabindex="-1" style="grid-column:2;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, August 15, 2026" tabindex="-1" style="grid-column:3;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, August 22, 2026" tabindex="-1" style="grid-column:4;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, August 29, 2026" tabindex="-1" style="grid-column:5;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, September 5, 2026" tabindex="-1" style="grid-column:6;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, September 12, 2026" tabindex="-1" style="grid-column:7;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, September 19, 2026" tabindex="-1" style="grid-column:8;grid-row:7"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Saturday, September 26, 2026" tabindex="0" style="grid-column:9;grid-row:7"></span>
    </div>
    <div class="ml-heatmap-row" role="row">
      <span class="ml-heatmap-weekday" role="rowheader" style="grid-row:8"><span aria-hidden="true" data-hidden="true">Sun</span></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, August 9, 2026" tabindex="-1" style="grid-column:2;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, August 16, 2026" tabindex="-1" style="grid-column:3;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, August 23, 2026" tabindex="-1" style="grid-column:4;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, August 30, 2026" tabindex="-1" style="grid-column:5;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, September 6, 2026" tabindex="-1" style="grid-column:6;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, September 13, 2026" tabindex="-1" style="grid-column:7;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" aria-label="0 commit on Sunday, September 20, 2026" tabindex="-1" style="grid-column:8;grid-row:8"></span>
      <span class="ml-heatmap-cell" role="gridcell" data-level="0" data-outside="true" aria-hidden="true" style="grid-column:9;grid-row:8"></span>
    </div>
  </div>
  <div class="ml-heatmap-tooltip" role="presentation" hidden=""></div>
  <div class="ml-heatmap-footer">
    <span class="ml-heatmap-caption">23 commit over 4 active days</span>
    <span class="ml-heatmap-legend" aria-hidden="true">Less<span class="ml-heatmap-cell" data-level="0"></span><span class="ml-heatmap-cell" data-level="1"></span><span class="ml-heatmap-cell" data-level="2"></span><span class="ml-heatmap-cell" data-level="3"></span><span class="ml-heatmap-cell" data-level="4"></span>More</span>
  </div>
</div>
```

---

# Calendar

> A month grid for one date, a range or several, with min and max, blocked days, two-month view and full keyboard paging.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/calendar

## Install

```bash
npx mlola-ui add calendar
```

```tsx
import { Calendar } from "@/components/ui/calendar";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Calendar | `mode` | `single`, `multiple`, `range` |  |

## Example

```tsx
import { Calendar } from "@/components/ui/calendar";

export default function Example() {
  return <Calendar defaultValue="2026-09-18" defaultMonth="2026-09-01" today="2026-09-14" label="Delivery date" />;
}
```

## The same markup without React

```html
<div class="ml-calendar" role="group" aria-label="Delivery date" data-months="1">
  <div class="ml-calendar-months">
    <div class="ml-calendar-month">
      <div class="ml-calendar-caption">
        <button class="ml-calendar-nav" type="button" aria-label="Previous month"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m15 18-6-6 6-6" pathLength="1"></path></svg></button>
        <p class="ml-calendar-title" aria-live="polite">September 2026</p>
        <button class="ml-calendar-nav" type="button" aria-label="Next month"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m9 18 6-6-6-6" pathLength="1"></path></svg></button>
      </div>
      <div class="ml-calendar-grid" role="grid" aria-label="September 2026">
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Monday">Mo</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Tuesday">Tu</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Wednesday">We</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Thursday">Th</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Friday">Fr</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Saturday">Sa</span>
          <span class="ml-calendar-weekday" role="columnheader" aria-label="Sunday">Su</span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, August 31, 2026" data-outside="true">31</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, September 1, 2026">1</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, September 2, 2026">2</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, September 3, 2026">3</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Friday, September 4, 2026">4</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, September 5, 2026">5</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, September 6, 2026">6</button></span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, September 7, 2026">7</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, September 8, 2026">8</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, September 9, 2026">9</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, September 10, 2026">10</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Friday, September 11, 2026">11</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, September 12, 2026">12</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, September 13, 2026">13</button></span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, September 14, 2026" aria-current="date" data-today="true">14</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, September 15, 2026">15</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, September 16, 2026">16</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, September 17, 2026">17</button></span>
          <span class="ml-calendar-cell" role="gridcell" aria-selected="true"><button class="ml-calendar-day" type="button" tabindex="0" aria-label="Friday, September 18, 2026" data-selected="true">18</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, September 19, 2026">19</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, September 20, 2026">20</button></span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, September 21, 2026">21</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, September 22, 2026">22</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, September 23, 2026">23</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, September 24, 2026">24</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Friday, September 25, 2026">25</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, September 26, 2026">26</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, September 27, 2026">27</button></span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, September 28, 2026">28</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, September 29, 2026">29</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, September 30, 2026">30</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, October 1, 2026" data-outside="true">1</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Friday, October 2, 2026" data-outside="true">2</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, October 3, 2026" data-outside="true">3</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, October 4, 2026" data-outside="true">4</button></span>
        </div>
        <div class="ml-calendar-row" role="row">
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Monday, October 5, 2026" data-outside="true">5</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Tuesday, October 6, 2026" data-outside="true">6</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Wednesday, October 7, 2026" data-outside="true">7</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Thursday, October 8, 2026" data-outside="true">8</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Friday, October 9, 2026" data-outside="true">9</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Saturday, October 10, 2026" data-outside="true">10</button></span>
          <span class="ml-calendar-cell" role="gridcell"><button class="ml-calendar-day" type="button" tabindex="-1" aria-label="Sunday, October 11, 2026" data-outside="true">11</button></span>
        </div>
      </div>
    </div>
  </div>
</div>
```

---

# Date Picker

> A date field that opens a calendar, for one date or a range with presets, shown in the reader's format and stored as ISO.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/date-picker

## Install

```bash
npx mlola-ui add date-picker
```

```tsx
import { DatePicker } from "@/components/ui/date-picker";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| DatePicker | `mode` | `single`, `range` |  |

## Example

```tsx
import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  return <DatePicker label="Start date" defaultValue="2026-09-18" today="2026-09-14" clearable />;
}
```

## The same markup without React

```html
<div class="ml-input-field ml-date-picker">
  <label class="ml-input-label" id="date-picker-1-label" for="date-picker-1">Start date</label>
  <div class="ml-date-picker-control">
    <button class="ml-input ml-date-picker-trigger" id="date-picker-1" type="button" aria-haspopup="dialog" aria-expanded="false"><svg class="mlola-glyph ml-date-picker-icon" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect x="3" y="5" width="18" height="16" rx="2" pathLength="1"></rect><path d="M8 3v4M16 3v4M3 10h18" pathLength="1"></path></svg><span class="ml-date-picker-value">Sep 18, 2026</span></button>
    <button class="ml-date-picker-clear" type="button" data-hit="expand" aria-label="Clear date"><svg class="mlola-glyph" width="0.9em" height="0.9em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M18 6 6 18M6 6l12 12" pathLength="1"></path></svg></button>
  </div>
</div>
```

---

# Time Picker

> A time field of typeable spinbuttons in 12- or 24-hour time, with a quick list; the value is always HH:MM.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/time-picker

## Install

```bash
npx mlola-ui add time-picker
```

```tsx
import { TimePicker } from "@/components/ui/time-picker";
```

## Example

```tsx
import { TimePicker } from "@/components/ui/time-picker";

export default function Example() {
  return <TimePicker label="Reminder" defaultValue="09:30" step={15} hourCycle={24} />;
}
```

## The same markup without React

```html
<div class="ml-input-field ml-time-picker">
  <label class="ml-input-label" id="time-picker-1-label" for="time-picker-1">Reminder</label>
  <div class="ml-input ml-time-picker-control" role="group" id="time-picker-1" aria-labelledby="time-picker-1-label">
    <span class="ml-time-picker-segment" role="spinbutton" tabindex="0" aria-label="Hours" aria-valuemin="0" aria-valuemax="23" aria-valuenow="9" aria-valuetext="09">09</span>
    <span class="ml-time-picker-colon" aria-hidden="true">:</span>
    <span class="ml-time-picker-segment" role="spinbutton" tabindex="0" aria-label="Minutes" aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30">30</span>
    <button class="ml-time-picker-open" type="button" aria-label="Choose from a list" aria-haspopup="dialog" aria-expanded="false"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><circle cx="12" cy="12" r="9.5" pathLength="1"></circle><path d="M12 7v5l3 2" pathLength="1"></path></svg></button>
  </div>
</div>
```

---

# Status Icon

> A work item status as one glyph: backlog, todo, in progress, in review, done and canceled, readable without color.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/status-icon

## Install

```bash
npx mlola-ui add status-icon
```

```tsx
import { StatusIcon } from "@/components/ui/status-icon";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| StatusIcon | `status` | `backlog`, `todo`, `in-progress`, `in-review`, `done`, `canceled` |  |

## Example

```tsx
import { StatusIcon } from "@/components/ui/status-icon";

export default function Example() {
  return (
    <div className="ml-cluster">
      <StatusIcon status="todo" />
      <StatusIcon status="in-progress" progress={0.5} />
      <StatusIcon status="done" />
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <svg class="ml-status-icon" viewBox="0 0 14 14" width="1em" height="1em" data-status="todo" role="img" aria-label="Todo"><circle cx="7" cy="7" r="5.75" fill="none" stroke="currentColor" stroke-width="1.5"></circle></svg>
  <svg class="ml-status-icon" viewBox="0 0 14 14" width="1em" height="1em" data-status="in-progress" role="img" aria-label="In progress"><circle cx="7" cy="7" r="5.75" fill="none" stroke="currentColor" stroke-width="1.5"></circle><circle cx="7" cy="7" r="2.4" fill="none" stroke="currentColor" stroke-width="4.8" stroke-dasharray="7.5398223686155035 15.079644737231007" transform="rotate(-90 7 7)"></circle></svg>
  <svg class="ml-status-icon" viewBox="0 0 14 14" width="1em" height="1em" data-status="done" role="img" aria-label="Done"><circle cx="7" cy="7" r="6" fill="currentColor"></circle><path d="M4.4 7.2 6.2 9 9.7 5.2" fill="none" stroke="var(--ml-status-mark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
```

---

# Priority Icon

> A work item priority as signal bars, with a filled alert for urgent.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/priority-icon

## Install

```bash
npx mlola-ui add priority-icon
```

```tsx
import { PriorityIcon } from "@/components/ui/priority-icon";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| PriorityIcon | `priority` | `none`, `urgent`, `high`, `medium`, `low` |  |

## Example

```tsx
import { PriorityIcon } from "@/components/ui/priority-icon";

export default function Example() {
  return (
    <div className="ml-cluster">
      <PriorityIcon priority="urgent" />
      <PriorityIcon priority="high" />
      <PriorityIcon priority="low" />
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <svg class="ml-priority-icon" viewBox="0 0 14 14" width="1em" height="1em" data-priority="urgent" role="img" aria-label="Urgent"><rect x="1" y="1" width="12" height="12" rx="3" fill="currentColor"></rect><path d="M7 3.8v3.9" stroke="var(--ml-priority-mark)" stroke-width="1.6" stroke-linecap="round"></path><circle cx="7" cy="10" r="0.95" fill="var(--ml-priority-mark)"></circle></svg>
  <svg class="ml-priority-icon" viewBox="0 0 14 14" width="1em" height="1em" data-priority="high" role="img" aria-label="High"><rect x="1.5" y="9" width="3" height="3.5" rx="1" fill="currentColor" opacity="1"></rect><rect x="5.5" y="5.8" width="3" height="6.7" rx="1" fill="currentColor" opacity="1"></rect><rect x="9.5" y="2.5999999999999996" width="3" height="9.9" rx="1" fill="currentColor" opacity="1"></rect></svg>
  <svg class="ml-priority-icon" viewBox="0 0 14 14" width="1em" height="1em" data-priority="low" role="img" aria-label="Low"><rect x="1.5" y="9" width="3" height="3.5" rx="1" fill="currentColor" opacity="1"></rect><rect x="5.5" y="5.8" width="3" height="6.7" rx="1" fill="currentColor" opacity="0.28"></rect><rect x="9.5" y="2.5999999999999996" width="3" height="9.9" rx="1" fill="currentColor" opacity="0.28"></rect></svg>
</div>
```

---

# Combobox

> A text field that filters a long list as you type, with grouping, descriptions and creating what is missing.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/combobox

## Install

```bash
npx mlola-ui add combobox
```

```tsx
import { ComboboxList } from "@/components/ui/combobox";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ComboboxList | `side` | `top`, `bottom` |  |

## Example

```tsx
import { Combobox } from "@/components/ui/combobox";

export default function Example() {
  return (
    <Combobox
      label="Framework"
      placeholder="Search frameworks"
      clearable
      options={[
        { value: "next", label: "Next.js" },
        { value: "remix", label: "Remix" },
        { value: "astro", label: "Astro" },
      ]}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-input-field ml-combobox">
  <label class="ml-input-label" id="combobox-1-label" for="combobox-1">Framework</label>
  <div class="ml-combobox-control">
    <input class="ml-input ml-combobox-input" id="combobox-1" role="combobox" aria-expanded="false" aria-controls="combobox-1-list" aria-autocomplete="list" placeholder="Search frameworks" autoComplete="off" spellCheck="false" value=""/>
    <svg class="mlola-glyph ml-combobox-chevron" width="1.1em" height="1.1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="6 9 12 15 18 9" pathLength="1"></polyline></svg>
  </div>
</div>
```

---

# Tag Input

> Many short values in one field: add with Enter or a comma, paste lists, remove with Backspace, with suggestions and validation.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/tag-input

## Install

```bash
npx mlola-ui add tag-input
```

```tsx
import { TagInput } from "@/components/ui/tag-input";
```

## Example

```tsx
import { TagInput } from "@/components/ui/tag-input";

export default function Example() {
  return <TagInput label="Labels" defaultValue={["design", "billing"]} placeholder="Add a label" max={5} />;
}
```

## The same markup without React

```html
<div class="ml-input-field ml-tag-input">
  <label class="ml-input-label" id="tag-input-1-label" for="tag-input-1">Labels</label>
  <div class="ml-tag-input-control">
    <ul class="ml-tag-input-tags" aria-label="Added">
      <li class="ml-tag-input-tag">
        <span class="ml-tag-input-text">design</span>
        <button class="ml-tag-input-remove" type="button" data-hit="expand" tabindex="-1" aria-label="Remove design"><svg class="mlola-glyph" width="0.8em" height="0.8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M18 6 6 18M6 6l12 12" pathLength="1"></path></svg></button>
      </li>
      <li class="ml-tag-input-tag">
        <span class="ml-tag-input-text">billing</span>
        <button class="ml-tag-input-remove" type="button" data-hit="expand" tabindex="-1" aria-label="Remove billing"><svg class="mlola-glyph" width="0.8em" height="0.8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M18 6 6 18M6 6l12 12" pathLength="1"></path></svg></button>
      </li>
    </ul>
    <input class="ml-tag-input-field" id="tag-input-1" placeholder="Add a label" autoComplete="off" value=""/>
    <span class="ml-tag-input-count" aria-hidden="true">2/5</span>
  </div>
  <p class="ml-visually-hidden" role="status" aria-live="polite"></p>
</div>
```

---

# Number Input

> A number field formatted at rest in the reader's locale, with steppers you can hold, arrows, bounds and precision.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/number-input

## Install

```bash
npx mlola-ui add number-input
```

```tsx
import { NumberInput } from "@/components/ui/number-input";
```

## Example

```tsx
import { NumberInput } from "@/components/ui/number-input";

export default function Example() {
  return <NumberInput label="Seats" defaultValue={5} min={1} max={50} hint="Up to 50 on this plan." locale="en-US" />;
}
```

## The same markup without React

```html
<div class="ml-input-field ml-number-input">
  <label class="ml-input-label" id="number-input-1-label" for="number-input-1">Seats</label>
  <div class="ml-number-input-control">
    <input class="ml-number-input-field" id="number-input-1" role="spinbutton" inputMode="decimal" autoComplete="off" aria-valuenow="5" aria-valuemin="1" aria-valuemax="50" aria-valuetext="5" aria-describedby="number-input-1-hint" value="5"/>
    <span class="ml-number-input-buttons"><button class="ml-number-input-step" type="button" tabindex="-1" aria-label="Decrease"><svg class="mlola-glyph" width="0.9em" height="0.9em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M5 12h14" pathLength="1"></path></svg></button><button class="ml-number-input-step" type="button" tabindex="-1" aria-label="Increase"><svg class="mlola-glyph" width="0.9em" height="0.9em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M12 5v14M5 12h14" pathLength="1"></path></svg></button></span>
  </div>
  <p class="ml-input-hint" id="number-input-1-hint">Up to 50 on this plan.</p>
</div>
```

---

# Color Picker

> A color field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/color-picker

## Install

```bash
npx mlola-ui add color-picker
```

```tsx
import { ColorPicker } from "@/components/ui/color-picker";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ColorPicker | `format` | `hex`, `rgb`, `oklch` | `hex` |

## Example

```tsx
import { ColorPicker } from "@/components/ui/color-picker";

export default function Example() {
  return <ColorPicker label="Brand color" defaultValue="oklch(0.62 0.19 255)" format="oklch" />;
}
```

## The same markup without React

```html
<div class="ml-input-field ml-color-picker">
  <label class="ml-input-label" id="color-picker-1-label" for="color-picker-1">Brand color</label>
  <button class="ml-input ml-color-picker-trigger" id="color-picker-1" type="button" aria-label="Brand color: oklch(61.9% 0.191 255.2)" aria-haspopup="dialog" aria-expanded="false"><span class="ml-color-picker-swatch" style="--ml-color:rgb(29 132 245)" aria-hidden="true"></span><span class="ml-color-picker-value">oklch(61.9% 0.191 255.2)</span></button>
</div>
```

---

# Stepper

> Progress through a flow of steps, horizontal or vertical, clickable, condensing to "Step 2 of 4" when narrow.

- Tier: free, MIT
- Category: Navigation
- Docs: https://ui.mlola.com/docs/components/stepper

## Install

```bash
npx mlola-ui add stepper
```

```tsx
import { Stepper } from "@/components/ui/stepper";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Stepper | `orientation` | `horizontal`, `vertical` | `horizontal` |

## Example

```tsx
import { Stepper } from "@/components/ui/stepper";

export default function Example() {
  return (
    <Stepper
      label="Checkout"
      current={1}
      steps={[{ label: "Cart" }, { label: "Shipping" }, { label: "Payment" }, { label: "Review", optional: true }]}
    />
  );
}
```

## The same markup without React

```html
<nav class="ml-stepper" aria-label="Checkout" data-orientation="horizontal">
  <p class="ml-stepper-summary" aria-hidden="true"><span>Step 2 of 4</span><strong>Shipping</strong><span class="ml-stepper-meter" style="--ml-stepper-progress:0.3333333333333333"></span></p>
  <ol class="ml-stepper-list">
    <li class="ml-stepper-step" data-status="complete">
      <span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true"><svg class="mlola-glyph" width="0.8em" height="0.8em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><polyline points="20 6 9 17 4 12" pathLength="1"></polyline></svg></span><span class="ml-stepper-text"><span class="ml-stepper-label">Cart</span></span><span class="ml-visually-hidden">, completed</span></span>
    </li>
    <li class="ml-stepper-step" data-status="current" aria-current="step">
      <span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">2</span><span class="ml-stepper-text"><span class="ml-stepper-label">Shipping</span></span><span class="ml-visually-hidden"></span></span>
    </li>
    <li class="ml-stepper-step" data-status="upcoming">
      <span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">3</span><span class="ml-stepper-text"><span class="ml-stepper-label">Payment</span></span><span class="ml-visually-hidden">, not started</span></span>
    </li>
    <li class="ml-stepper-step" data-status="upcoming">
      <span class="ml-stepper-target"><span class="ml-stepper-marker" aria-hidden="true">4</span><span class="ml-stepper-text"><span class="ml-stepper-label">Review</span><span class="ml-stepper-description">Optional</span></span><span class="ml-visually-hidden">, not started</span></span>
    </li>
  </ol>
</nav>
```

---

# Virtual List

> A long list that renders only what is on screen, measures rows of any height and loads more near the end.

- Tier: free, MIT
- Category: Data display
- Docs: https://ui.mlola.com/docs/components/virtual-list

## Install

```bash
npx mlola-ui add virtual-list
```

```tsx
import { VirtualList } from "@/components/ui/virtual-list";
```

## Example

```tsx
import { VirtualList } from "@/components/ui/virtual-list";

export default function Example() {
  return (
    <VirtualList
      label="Events"
      count={10000}
      height={240}
      estimateSize={36}
      renderItem={(index) => <div>Event {index + 1}</div>}
    />
  );
}
```

## The same markup without React

```html
<div class="ml-virtual-list" style="height:240px" role="list" aria-label="Events" tabindex="0">
  <div class="ml-virtual-list-space" style="height:360000px">
    <div class="ml-virtual-list-row" data-index="0" role="listitem" aria-setsize="10000" aria-posinset="1" style="transform:translateY(0px)">
      <div>Event 1</div>
    </div>
    <div class="ml-virtual-list-row" data-index="1" role="listitem" aria-setsize="10000" aria-posinset="2" style="transform:translateY(36px)">
      <div>Event 2</div>
    </div>
    <div class="ml-virtual-list-row" data-index="2" role="listitem" aria-setsize="10000" aria-posinset="3" style="transform:translateY(72px)">
      <div>Event 3</div>
    </div>
    <div class="ml-virtual-list-row" data-index="3" role="listitem" aria-setsize="10000" aria-posinset="4" style="transform:translateY(108px)">
      <div>Event 4</div>
    </div>
    <div class="ml-virtual-list-row" data-index="4" role="listitem" aria-setsize="10000" aria-posinset="5" style="transform:translateY(144px)">
      <div>Event 5</div>
    </div>
    <div class="ml-virtual-list-row" data-index="5" role="listitem" aria-setsize="10000" aria-posinset="6" style="transform:translateY(180px)">
      <div>Event 6</div>
    </div>
    <div class="ml-virtual-list-row" data-index="6" role="listitem" aria-setsize="10000" aria-posinset="7" style="transform:translateY(216px)">
      <div>Event 7</div>
    </div>
    <div class="ml-virtual-list-row" data-index="7" role="listitem" aria-setsize="10000" aria-posinset="8" style="transform:translateY(252px)">
      <div>Event 8</div>
    </div>
    <div class="ml-virtual-list-row" data-index="8" role="listitem" aria-setsize="10000" aria-posinset="9" style="transform:translateY(288px)">
      <div>Event 9</div>
    </div>
    <div class="ml-virtual-list-row" data-index="9" role="listitem" aria-setsize="10000" aria-posinset="10" style="transform:translateY(324px)">
      <div>Event 10</div>
    </div>
    <div class="ml-virtual-list-row" data-index="10" role="listitem" aria-setsize="10000" aria-posinset="11" style="transform:translateY(360px)">
      <div>Event 11</div>
    </div>
    <div class="ml-virtual-list-row" data-index="11" role="listitem" aria-setsize="10000" aria-posinset="12" style="transform:translateY(396px)">
      <div>Event 12</div>
    </div>
    <div class="ml-virtual-list-row" data-index="12" role="listitem" aria-setsize="10000" aria-posinset="13" style="transform:translateY(432px)">
      <div>Event 13</div>
    </div>
    <div class="ml-virtual-list-row" data-index="13" role="listitem" aria-setsize="10000" aria-posinset="14" style="transform:translateY(468px)">
      <div>Event 14</div>
    </div>
    <div class="ml-virtual-list-row" data-index="14" role="listitem" aria-setsize="10000" aria-posinset="15" style="transform:translateY(504px)">
      <div>Event 15</div>
    </div>
    <div class="ml-virtual-list-row" data-index="15" role="listitem" aria-setsize="10000" aria-posinset="16" style="transform:translateY(540px)">
      <div>Event 16</div>
    </div>
    <div class="ml-virtual-list-row" data-index="16" role="listitem" aria-setsize="10000" aria-posinset="17" style="transform:translateY(576px)">
      <div>Event 17</div>
    </div>
    <div class="ml-virtual-list-row" data-index="17" role="listitem" aria-setsize="10000" aria-posinset="18" style="transform:translateY(612px)">
      <div>Event 18</div>
    </div>
    <div class="ml-virtual-list-row" data-index="18" role="listitem" aria-setsize="10000" aria-posinset="19" style="transform:translateY(648px)">
      <div>Event 19</div>
    </div>
    <div class="ml-virtual-list-row" data-index="19" role="listitem" aria-setsize="10000" aria-posinset="20" style="transform:translateY(684px)">
      <div>Event 20</div>
    </div>
    <div class="ml-virtual-list-row" data-index="20" role="listitem" aria-setsize="10000" aria-posinset="21" style="transform:translateY(720px)">
      <div>Event 21</div>
    </div>
    <div class="ml-virtual-list-row" data-index="21" role="listitem" aria-setsize="10000" aria-posinset="22" style="transform:translateY(756px)">
      <div>Event 22</div>
    </div>
    <div class="ml-virtual-list-row" data-index="22" role="listitem" aria-setsize="10000" aria-posinset="23" style="transform:translateY(792px)">
      <div>Event 23</div>
    </div>
  </div>
</div>
```

---

# Context Menu

> A right-click menu built for what was clicked, with shortcuts, typeahead, long-press on touch and Shift+F10.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/context-menu

## Install

```bash
npx mlola-ui add context-menu
```

```tsx
import { ContextMenu } from "@/components/ui/context-menu";
```

## Example

```tsx
import { ContextMenu } from "@/components/ui/context-menu";

export default function Example() {
  return (
    <ContextMenu
      label="File actions"
      items={[
        { label: "Rename", shortcut: "F2" },
        { label: "Duplicate" },
        { label: "Delete", danger: true, separatorBefore: true },
      ]}
    >
      <div className="ml-card" data-variant="outline">
        <div className="ml-card-content">Right-click, or press Shift+F10, on this file.</div>
      </div>
    </ContextMenu>
  );
}
```

## The same markup without React

```html
<div class="ml-context-menu-area">
  <div class="ml-card" data-variant="outline">
    <div class="ml-card-content">Right-click, or press Shift+F10, on this file.</div>
  </div>
</div>
```

---

# Hover Card

> A preview card that opens when the pointer rests on a link or name, and on keyboard focus.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/hover-card

## Install

```bash
npx mlola-ui add hover-card
```

```tsx
import { HoverCard } from "@/components/ui/hover-card";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| HoverCard | `align` | `start`, `center`, `end` | `start` |
| HoverCard | `side` | `top`, `bottom`, `left`, `right` | `bottom` |

## Example

```tsx
import { HoverCard } from "@/components/ui/hover-card";

export default function Example() {
  return (
    <HoverCard content={<p>Lena Park, design lead. Owns the pricing page.</p>}>
      <a href="/people/lena">@lena</a>
    </HoverCard>
  );
}
```

## The same markup without React

```html
<a href="/people/lena">@lena</a>
```

---

# Tour

> A guided product tour that spotlights parts of the page step by step, with keyboard control and a focus trap.

- Tier: free, MIT
- Category: Overlays
- Docs: https://ui.mlola.com/docs/components/tour

## Install

```bash
npx mlola-ui add tour
```

```tsx
import { Tour } from "@/components/ui/tour";
```

## Example

```tsx
"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Tour } from "@/components/ui/tour";

export default function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <div className="ml-cluster">
        <Button id="tour-search" variant="secondary">Search</Button>
        <Button id="tour-new">New project</Button>
        <Button variant="subtle" onClick={() => setOpen(true)}>Take the tour</Button>
      </div>
      <Tour
        open={open}
        onOpenChange={setOpen}
        steps={[
          { target: "#tour-search", title: "Find anything", body: "Search projects, people and settings." },
          { target: "#tour-new", title: "Start here", body: "A project holds pages, members and billing." },
        ]}
      />
    </>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <button class="ml-button" type="button" data-variant="secondary" data-size="md" id="tour-search"><span class="ml-button-label">Search</span></button>
  <button class="ml-button" type="button" data-variant="primary" data-size="md" id="tour-new"><span class="ml-button-label">New project</span></button>
  <button class="ml-button" type="button" data-variant="subtle" data-size="md"><span class="ml-button-label">Take the tour</span></button>
</div>
```

---

# App Shell

> A resizable, foldable sidebar with sections and items that becomes a drawer on small screens.

- Tier: free, MIT
- Category: Layout
- Docs: https://ui.mlola.com/docs/components/app-shell

## Install

```bash
npx mlola-ui add app-shell
```

```tsx
import { AppShell } from "@/components/ui/app-shell";
```

## Example

```tsx
import { IconHome, IconMail, IconSettings } from "@mlola-ui/icons";
import { AppShell, Sidebar, SidebarItem, SidebarSection } from "@/components/ui/app-shell";

export default function Example() {
  return (
    <div style={{ height: 320 }}>
      <AppShell
        label="Workspace"
        sidebar={
          <Sidebar header={<strong>Atlas</strong>}>
            <SidebarSection title="Workspace">
              <SidebarItem label="Home" icon={<IconHome size="1em" />} href="/" current />
              <SidebarItem label="Inbox" icon={<IconMail size="1em" />} href="/inbox" count={3} />
              <SidebarItem label="Settings" icon={<IconSettings size="1em" />} href="/settings" />
            </SidebarSection>
          </Sidebar>
        }
      >
        <main>Home</main>
      </AppShell>
    </div>
  );
}
```

## The same markup without React

```html
<div style="height:320px">
  <div class="ml-app-shell">
    <div class="ml-resizable ml-app-shell-frame" data-direction="horizontal" data-anchor="first" style="--ml-resizable-size:248px">
      <div class="ml-resizable-pane">
        <nav class="ml-app-shell-sidebar" aria-label="Workspace">
          <div class="ml-sidebar">
            <div class="ml-sidebar-header"><strong>Atlas</strong></div>
            <div class="ml-sidebar-body">
              <section class="ml-sidebar-section">
                <h2 class="ml-sidebar-title">Workspace</h2>
                <ul class="ml-sidebar-list" id="app-shell-1">
                  <li class="ml-sidebar-entry">
                    <a class="ml-sidebar-item" href="/" aria-current="page"><span class="ml-sidebar-icon" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="m3 11 9-8 9 8v10h-6v-6H9v6H3Z" pathLength="1"></path></svg></span><span class="ml-sidebar-label">Home</span></a>
                  </li>
                  <li class="ml-sidebar-entry">
                    <a class="ml-sidebar-item" href="/inbox"><span class="ml-sidebar-icon" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect x="3" y="5" width="18" height="14" rx="2" pathLength="1"></rect><path d="m4 7 8 6 8-6" pathLength="1"></path></svg></span><span class="ml-sidebar-label">Inbox</span><span class="ml-sidebar-count">3</span></a>
                  </li>
                  <li class="ml-sidebar-entry">
                    <a class="ml-sidebar-item" href="/settings"><span class="ml-sidebar-icon" aria-hidden="true"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><circle cx="12" cy="12" r="3" pathLength="1"></circle><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" pathLength="1"></path></svg></span><span class="ml-sidebar-label">Settings</span></a>
                  </li>
                </ul>
              </section>
            </div>
          </div>
        </nav>
      </div>
      <div class="ml-resizable-handle" role="separator" tabindex="0" aria-label="Resize workspace" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="360" aria-valuenow="248"></div>
      <div class="ml-resizable-pane"><div class="ml-app-shell-main"><main>Home</main></div></div>
    </div>
  </div>
</div>
```

---

# Spinner

> Work in progress whose end is unknown, drawn in the color of the text around it and named for screen readers when it stands alone.

- Tier: free, MIT
- Category: Feedback
- Docs: https://ui.mlola.com/docs/components/spinner

## Install

```bash
npx mlola-ui add spinner
```

```tsx
import { Spinner } from "@/components/ui/spinner";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Spinner | `size` | `sm`, `md`, `lg` | `md` |

## Example

```tsx
import { Spinner } from "@/components/ui/spinner";

export default function Example() {
  return (
    <p className="ml-cluster">
      <Spinner label="Loading results" />
      Searching 12,480 records
    </p>
  );
}
```

## The same markup without React

```html
<p class="ml-cluster"><span class="ml-spinner" role="status" data-size="md"><span class="ml-visually-hidden">Loading results</span></span>Searching 12,480 records</p>
```

---

# Copy Button

> Copies a value to the clipboard and confirms it, with the outcome spoken to screen readers and a refusal explained.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/copy-button

## Install

```bash
npx mlola-ui add copy-button
```

```tsx
import { CopyButton } from "@/components/ui/copy-button";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| CopyButton | `size` | `sm`, `md`, `lg`, `icon` |  |
| CopyButton | `variant` | `primary`, `secondary`, `subtle`, `danger`, `outline`, `link` | `secondary` |
| CopyButton | `width` | `auto`, `full` |  |

## Example

```tsx
import { CopyButton } from "@/components/ui/copy-button";

export default function Example() {
  return (
    <div className="ml-cluster">
      <code>ml_live_4f9a2c</code>
      <CopyButton value="ml_live_4f9a2c" label="Copy API key" variant="subtle" />
      <CopyButton value="https://ui.mlola.com/invite/3fa9" size="sm">
        Copy invite link
      </CopyButton>
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <code>ml_live_4f9a2c</code>
  <button class="ml-button ml-copy-button" type="button" data-variant="subtle" data-size="icon" aria-label="Copy API key" title="Copy API key"><span class="ml-button-label"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect width="13" height="13" x="9" y="9" rx="2" ry="2" pathLength="1"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" pathLength="1"></path></svg><span class="ml-visually-hidden" role="status"></span></span></button>
  <button class="ml-button ml-copy-button" type="button" data-variant="secondary" data-size="sm"><span class="ml-button-label"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect width="13" height="13" x="9" y="9" rx="2" ry="2" pathLength="1"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" pathLength="1"></path></svg>Copy invite link<span class="ml-visually-hidden" role="status"></span></span></button>
</div>
```

---

# Password Input

> A password field with a show and hide toggle and, when choosing a new password, a meter that says how strong it is and what would make it stronger.

- Tier: free, MIT
- Category: Forms
- Docs: https://ui.mlola.com/docs/components/password-input

## Install

```bash
npx mlola-ui add password-input
```

```tsx
import { PasswordInput } from "@/components/ui/password-input";
```

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| PasswordInput | `size` | `sm`, `md`, `lg` |  |
| PasswordInput | `variant` | `default`, `filled`, `subtle` |  |

## Example

```tsx
import { PasswordInput } from "@/components/ui/password-input";

export default function Example() {
  return <PasswordInput label="New password" name="password" strength />;
}
```

## The same markup without React

```html
<div class="ml-password-input">
  <div class="ml-input-field">
    <label class="ml-input-label" id="input-2-label" for="input-2">New password</label>
    <div class="ml-input-control" data-trailing="">
      <input class="ml-input" id="input-2" aria-describedby="password-input-1" data-variant="default" data-size="md" type="password" autoComplete="new-password" autoCapitalize="none" autoCorrect="off" spellCheck="false" name="password"/>
      <span class="ml-input-trailing"><button class="ml-password-input-toggle" type="button" aria-label="Show password" aria-pressed="false" data-hit="expand"><svg class="mlola-glyph" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" pathLength="1"></path><circle cx="12" cy="12" r="3" pathLength="1"></circle></svg></button></span>
    </div>
  </div>
  <div class="ml-password-input-strength" id="password-input-1" data-strength="empty" aria-live="polite">
    <span class="ml-password-input-meter" aria-hidden="true"><span></span><span></span><span></span></span>
    <p>Use 8 or more characters.</p>
  </div>
</div>
```

---

# Mlola Pro

These need a Mlola Pro license. Create a token at https://ui.mlola.com/account, run `npx mlola-ui login <token>`, then `npx mlola-ui add <name>`.

## Bot (`bot`)

An expressive companion whose body morphs between shapes on springs and whose face carries the assistant's state.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Bot | `face` | `pill`, `round`, `pixel`, `visor` | `pill` |
| Bot | `shape` | `round`, `squircle`, `blob` | `round` |
| Bot | `size` | `sm`, `md`, `lg`, `xl` | `md` |
| Bot | `state` | `idle`, `listening`, `thinking`, `working`, `speaking`, `happy`, `confused`, `error`, `sleeping` | `idle` |
| Bot | `texture` | `none`, `grain`, `dots` | `none` |
| Bot | `tone` | `neutral`, `primary`, `info`, `success`, `warning`, `danger` | `neutral` |
| Bot | `variant` | `solid`, `gradient`, `glass`, `outline` | `solid` |

## Citation (`citation`)

Numbered inline sources with hover previews and a matching source list.

## Code Block (`code-block`)

Highlighted code with a filename, line numbers, marked lines and copy; its palette is Mlola's contrast-solved text roles.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| CodeBlock | `language` | `tsx`, `css`, `html`, `json`, `bash`, `python`, `plain` |  |

## Confidence Text (`confidence-text`)

An answer that marks where the model is unsure, with the confidence spoken to screen readers.

## Context Cards (`context-cards`)

The passages a model retrieved before answering, with source, location, relevance and the query's words marked.

## Context Meter (`context-meter`)

How full the context window is and on what, warning before answers get cut short.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ContextMeter | `variant` | `ring`, `bar` | `bar` |

## Conversation (`conversation`)

A message log that follows new content and offers a way back when the reader scrolls up.

## Diff View (`diff-view`)

Unified or split file diffs from before/after text or a patch, with in-line change marks and folded unchanged lines.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| DiffView | `language` | `tsx`, `css`, `html`, `json`, `bash`, `python`, `plain` |  |
| DiffView | `view` | `unified`, `split` | `unified` |

## File Changes (`file-changes`)

An agent's changed files as one summary line that opens into each file's status and size of change.

## Message (`message`)

One conversation turn with actions, feedback, answer versions and a facts line.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Message | `from` | `user`, `assistant`, `system` |  |
| Message | `status` | `complete`, `streaming`, `error` | `complete` |
| MessageActions | `reveal` | `always`, `hover` | `always` |
| MessageFeedback | `value` | `up`, `down` |  |

## Model Picker (`model-picker`)

Choose a model by speed, reasoning depth and context window, built on Select.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ModelPicker | `size` | `sm`, `md`, `lg` | `sm` |

## Orb (`orb`)

The assistant's presence: idle, listening, thinking and speaking, colored by the theme and driven by live audio.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Orb | `size` | `sm`, `md`, `lg`, `xl` | `md` |
| Orb | `state` | `idle`, `listening`, `thinking`, `speaking` | `idle` |

## Prompt Input (`prompt-input`)

A growing composer that sends on Enter, never mid-IME, with attachments, tools and a stop button.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| PromptInput | `status` | `idle`, `submitting`, `streaming` | `idle` |
| PromptInput | `submitOn` | `enter`, `mod-enter` | `enter` |

## Selection Actions (`selection-actions`)

Select text and AI actions appear above it: rewrite, explain, shorten.

## Streaming Text (`streaming-text`)

Text that arrives in pieces, revealed at a steady reading rate that catches up on bursts, with fresh runs fading in.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| StreamingText | `as` | `div`, `p`, `span` | `div` |

## Suggestions (`suggestions`)

Prompt starters and follow-ups as a wrapping or swipeable row.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Suggestions | `layout` | `wrap`, `scroll` | `wrap` |

## Task List (`task-list`)

An agent's plan as it runs: status per step, nested subtasks, progress announced as it changes.

## Thinking (`thinking`)

A model's reasoning with a live timer that folds into “Thought for 8s”, plus shimmer, dots and orbit indicators.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ThinkingIndicator | `variant` | `shimmer`, `dots`, `orbit` | `shimmer` |
| Thinking | `status` | `thinking`, `done` | `thinking` |

## Tool Call (`tool-call`)

A model's tool use as an expandable card, with input, output, timing and human approval.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ToolCall | `status` | `pending`, `running`, `success`, `error`, `approval`, `denied` | `pending` |
| ToolCall | `variant` | `card`, `compact` | `card` |

## Voice Wave (`voice-wave`)

Mirrored audio bars for microphone input or the assistant's voice, fed by a live meter.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| VoiceWave | `state` | `idle`, `listening`, `speaking`, `muted` | `idle` |

## File Tree (`file-tree`)

A project's files as a keyboard-first tree with folder guides, file-type badges and git status.

## Terminal (`terminal`)

Command output with ANSI colors mapped to theme roles, exit status, follow-on-output scrolling and an optional input with history.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Terminal | `status` | `idle`, `running`, `success`, `error` | `idle` |

## Source Control (`source-control`)

Branch sync state, staged and unstaged changes, and a commit box whose message a model can stream in.

## Commit History (`commit-history`)

A git log with a branch graph, refs, CI checks, authors and relative times.

## Editor Tabs (`editor-tabs`)

Open files across an editor: unsaved dots, git status, preview tabs and names that disambiguate twins.

## Canvas (`canvas`)

An infinite surface to pan and zoom, with a dotted grid, zoom controls, floating panels and collaborators' cursors.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Canvas | `grid` | `dots`, `lines`, `none` | `dots` |
| CanvasPanel | `position` | `top-left`, `top`, `top-right`, `left`, `right`, `bottom-left`, `bottom`, `bottom-right` | `top-left` |
| CanvasCursor | `tone` | `primary`, `info`, `success`, `warning`, `danger` | `primary` |

## Canvas Toolbar (`canvas-toolbar`)

A floating tool palette with single-key shortcuts, roving focus and room for undo and redo.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| CanvasToolbar | `orientation` | `horizontal`, `vertical` | `horizontal` |

## Minimap (`minimap`)

The whole canvas in miniature, with the view outlined; press or drag to move there.

## Node Graph (`node-graph`)

A node editor for agent workflows: drag nodes, connect ports, refuse loops and watch a run flow through the edges.

## Whiteboard (`whiteboard`)

Shapes, arrows, freehand, text and sticky notes on an infinite canvas, with selection, resize, color, undo and presence.

## Rich Text Editor (`rich-text-editor`)

A modern rich text editor: headings, marks, lists, quotes, code and links, with Markdown shortcuts as you type and paste cleaned to what it owns.

## Block Editor (`block-editor`)

A block editor: slash commands, Markdown shortcuts, to-dos, callouts, drag to reorder, a selection bubble and AI that streams into the page.

## Suggested Edit (`suggested-edit`)

An AI rewrite shown as word-level tracked changes, each accepted or rejected on its own or all at once.

## Property Picker (`property-picker`)

A small trigger that opens a searchable menu to set a property: status, priority, assignee or labels, one or many.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| PropertyPicker | `align` | `start`, `center`, `end` |  |
| PropertyPicker | `side` | `top`, `bottom`, `left`, `right` |  |
| PropertyPicker | `variant` | `pill`, `subtle`, `icon` |  |

## Filter Bar (`filter-bar`)

Filters as editable sentences, "Status is In progress", with an applyFilters helper.

## Kanban (`kanban`)

Columns of cards that move by drag or keyboard, with room-making drops, edge scrolling, folding columns and limits.

## Chart (`chart`)

The shared chart frame: scales, nice ticks, monotone curves, stacking, legend, tooltip and an accessible data table.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| ChartLegend | `layout` | `row`, `column` | `row` |

## Line Chart (`line-chart`)

Lines and areas over a sequence, stacked or overlaid, with a crosshair, keyboard reading and dashed targets.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| LineChart | `curve` | `linear`, `smooth`, `step` | `smooth` |

## Bar Chart (`bar-chart`)

Bars per category, grouped or stacked, standing up or lying across, with rounded ends and keyboard reading.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| BarChart | `layout` | `vertical`, `horizontal` | `vertical` |

## Donut Chart (`donut-chart`)

Parts of a whole as a ring whose center reads the slice you point at.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| DonutChart | `legend` | `side`, `below`, `none` | `side` |

## Sparkline (`sparkline`)

A tiny axis-free trend line for stat cards, tables and lists.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Sparkline | `tone` | `neutral`, `primary`, `info`, `success`, `warning`, `danger`, `trend` | `neutral` |

## Gantt (`gantt`)

A roadmap timeline: grouped bars you drag and resize, milestones, dependency arrows, today and three zoom levels.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Gantt | `defaultScale` | `week`, `month`, `quarter` | `month` |
| Gantt | `scale` | `week`, `month`, `quarter` |  |

## Data Grid (`data-grid`)

A spreadsheet-grade table: virtualized rows, pinned and resizable columns, sorting, cell ranges, inline editing, copy and paste, totals.

## Scheduler (`scheduler`)

A day, three-day and week calendar where events are drawn, moved and resized by pointer or keyboard, with overlaps laid out side by side.

Props with fixed values:

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Scheduler | `defaultView` | `day`, `three`, `week` | `week` |
| Scheduler | `view` | `day`, `three`, `week` |  |

## Funnel Chart (`funnel-chart`)

Stages of a funnel with step conversion and drop-off between each.

## Radar Chart (`radar-chart`)

Several series compared across the same qualities on a spider web, with highlighting and a tooltip.

## Scatter Chart (`scatter-chart`)

Points or bubbles on two measures, with series, keyboard stepping and a tooltip.

## Treemap (`treemap`)

Nested rectangles sized by value, laid out as squares as far as possible.

## Trace Viewer (`trace-viewer`)

One agent run span by span: a tree on a timeline with the slow and failing steps marked, totals for time, tokens and cost, and each span's input and output.

## Eval Grid (`eval-grid`)

Test cases against model and prompt variants: pass rates, scores, latency and cost, disagreements, and each answer diffed against the expected one.

## Model Compare (`model-compare`)

The same prompt streamed to several models side by side, blind by default, with time to first token, speed and a vote.

## Prompt Playground (`prompt-playground`)

A system prompt and a template whose variables become fields, with model settings, saved versions and a run history.

## Generative UI (`generative-ui`)

Renders a JSON interface a model streams — metrics, charts, tables, alerts, buttons — from the library's own components as it arrives.

## Transcript (`transcript`)

A call or meeting transcript that follows playback word by word, with speakers, search and a summary.

- **AI Chat** (`ai-chat`, block): A complete chat surface that streams reasoning, tool use, answers and sources from any model through one responder function.
- **Auth Split** (`auth-split`, block): Brand panel plus login/signup tabbed form.
- **CTA + Footer** (`cta-footer`, block): Gradient call-to-action band with email capture plus link footer.
- **Data Table** (`data-table`, block): Orders-style table with search, status pills, and empty state.
- **FAQ Accordion** (`faq-accordion`, block): Collapsible question list with smooth animation.
- **Feature Grid** (`feature-grid`, block): Icon feature grid with 2/3/4 column options.
- **Hero Split** (`hero-split`, block): Split hero with badge, headline, dual CTAs, stats, and a replaceable visual.
- **Navbar** (`navbar`, block): Sticky marketing nav with mobile menu.
- **Newsletter** (`newsletter`, block): Email capture band with success state.
- **Pricing Tiers** (`pricing-tiers`, block): Tier cards with highlighted plan and billing toggle.
- **Product Grid** (`product-grid`, block): Filterable product cards with ratings and cart actions.
- **Stats Band** (`stats-band`, block): Metric row with deltas for dashboards and heroes.
- **Testimonials** (`testimonials`, block): Customer quote cards with ratings and avatars.
- **Thread Sidebar** (`thread-sidebar`, block): Searchable, grouped conversations or agent runs, with live status for work running in the background.
- **Voice Session** (`voice-session`, block): Full-screen voice mode: the assistant's presence, a live wave, captions and call controls, metering the real microphone when allowed.
- **Logo Cloud** (`logo-cloud`, block): Customer wordmarks under a line of proof, as framed tiles or one quiet row.
- **Comparison Table** (`comparison-table`, block): Every plan side by side, feature by feature, in groups, with the recommended plan marked.
- **Feature Rows** (`feature-rows`, block): Features told one at a time, text beside a visual, alternating down the page.
- **Process Steps** (`process-steps`, block): A short numbered path from signing up to value, across a row or down a rail beside the heading.
- **Contact Form** (`contact-form`, block): Ways to reach the team beside a validated message form with topics, a success state and focus that follows it.
- **Changelog** (`changelog`, block): Releases newest first, each change tagged new, improved or fixed, with a filter by kind.
- **Onboarding Checklist** (`onboarding-checklist`, block): A getting-started list with progress, the next step called out, and a finished state.
- **Activity Feed** (`activity-feed`, block): What happened in a workspace, newest first, grouped by day and filterable by kind.
- **Settings Panel** (`settings-panel`, block): Settings sections and rows with a save bar that validates, discards and reports unsaved changes.
- **Error State** (`error-state`, block): Not-found, server error, maintenance and offline screens with search, next steps and a reference.
- **Auth** (`auth`, page): Authentication page with login/signup tabs, validation, and brand panel.
- **Blog** (`blog`, page): Blog index with featured post, filterable grid, and newsletter.
- **Chat App** (`chat-app`, page): A full chat product on one route: conversations, streaming chat with reasoning, tools and sources, and voice mode.
- **Dashboard** (`dashboard`, page): Admin dashboard with sidebar, stat cards, chart, and activity table.
- **Landing Page** (`landing`, page): Full SaaS landing page with hero, features, pricing, testimonials, and CTA.
- **Pricing** (`pricing`, page): SaaS pricing page with billing toggle, tier cards, and comparison table.
- **Features** (`features`, page): A product tour: centered hero, customer row, features told one at a time, getting started, essentials and reviews.
- **Contact** (`contact`, page): Contact channels, a validated message form and the questions people ask before writing.
- **Welcome** (`welcome`, page): A new member's home: workspace navigation, this week in numbers, the setup checklist and recent activity.
- **Release Notes** (`release-notes`, page): A public changelog with filterable releases and a monthly email signup.
- **Code Agent** (`code-agent`, template): A coding agent's workspace: threads, a folded work log with plan and tool calls, results with changed files, and a diff pane for every turn.
- **Storefront** (`ecommerce`, template): Ecommerce storefront with filters, product grid, and cart drawer state.
- **Canvas Studio** (`canvas-studio`, template): A canvas studio: whiteboards with collaborators and AI that adds ideas to the view, and an agent workflow builder with a step palette, inspector and live test runs.
- **Notebook** (`notebook`, template): A notebook: a page tree with favorites and search, pages with covers, icons and properties, a block editor, and an assistant that summarizes, rewrites with tracked changes and gathers open to-dos.
- **Tracker** (`tracker`, template): An issue tracker: an inbox the assistant triages, teams with a keyboard-first list and a board with swimlanes, saved views, cycles with burndown, a roadmap, issue pages with history, and an AI agent that takes work.
- **Analytics** (`analytics`, template): A product analytics dashboard: traffic with its expected range, a conversion funnel, sources and top pages, revenue by plan, movement, country and account, product use, feature adoption and cohort retention.
- **Settings & Billing** (`settings`, template): Account and workspace settings: a validated profile with a save bar, notification channels and quiet hours, members with invitations and roles, API keys shown once, and billing with usage, plans, prorated changes through Paddle and invoices.
- **AI Console** (`ai-console`, template): An AI operations console: usage, latency and spend by model, every agent run as a trace with its spans and failures, eval runs across prompt versions with regressions called out, a prompt playground and blind model comparison.
- **CRM** (`crm`, template): A CRM: companies and people as editable grids, a deal pipeline with weighted totals, and record pages with an activity timeline, an account brief the assistant writes and next steps it drafts for review.
- **Mail** (`mail`, template): A keyboard-first mail client: a split inbox with the assistant's triage, summaries, first drafts and edits to your own reply you accept change by change, done, snooze and star with a key, and a command menu.
- **Scheduling** (`scheduling`, template): Scheduling: a public booking page with open times from weekly hours, buffers and existing bookings in the visitor's time zone, a confirmation with a calendar file, and the host's bookings, team calendar, event types, hours and days off.
- **Support Desk** (`support`, template): A support desk: an inbox sorted by live response targets, replies and internal notes with macros, a suggested answer the assistant writes from the help center with citations and confidence, the customer beside it, and the questions that still need an article.
- **Marketing Site** (`marketing-site`, template): A complete product site: home, features, pricing with a full comparison, changelog, contact, sign-in and a not-found page, with one navigation that marks where the reader is.
- **Docs Site** (`docs-site`, template): A documentation site: grouped articles in a sidebar, search over every page and section, a table of contents that follows the reader, code with copy, notes, previous and next, and feedback on every page.