Triform

color-picker-popup

A compact colour chooser. Use it for brand / theme / label colour entry where a curated palette covers most needs but a custom hex must still be possible. It pairs a preset swatch grid with a hex field and a live preview; Enter commits, Escape closes, focus is trapped while open and restored on close.

Readiness: complete
Preview: live
Props: 3
Examples: 2
Code: implementation mapped

When to use

Brand or theme colour selection from a curated palette
Tag / label colour assignment with an occasional custom value
Any surface that previously hand-rolled a colour overlay

When not to use

Full gradient / alpha authoring — needs a richer colour tool
A fixed, non-custom set of choices — use a swatch radio group
Inline single-field entry — use the ColorInput primitive

Accessibility

Role: dialog

Props

Name	Type	Default	Description
`value`	`string`	`#3B82F6`	Initial selected colour (hex).
`swatches`	`array`	`—`	Preset hex swatches. Falls back to a built-in palette when empty.
`trigger_label`	`string`	`Pick a colour`	Label for the button that opens the picker.

Examples

Brand colour

Brand-colour picker with the default palette.

YAML

type: color-picker-popup
props:
  value: '#3B82F6'
  trigger_label: Pick a colour

Custom palette

Constrained custom palette.

YAML

type: color-picker-popup
props:
  value: '#22C55E'
  trigger_label: Label colour
  swatches:
  - '#EF4444'
  - '#F59E0B'
  - '#22C55E'
  - '#3B82F6'
  - '#A855F7'
  - '#EC4899'

Edit YAML

command-palette

#existingsource

An application-wide command launcher. Use CommandPalette to give power users a single keyboard-first entry point to navigate and run actions: it filters a flat command list as the user types and is fully keyboard-navigable (Arrow up/down to move, Enter to run, Escape to dismiss). Focus is trapped while open and restored on close. EditorPalette is the IDE-scoped sibling; this is the app-wide variant.

Readiness: complete
Preview: live
Props: 3
Examples: 2
Code: implementation mapped

When to use

A global 'do anything' launcher reached by a keyboard shortcut
Surfaces with many actions that would bloat a visible toolbar
Power-user navigation across an app's whole command surface

When not to use

A small set of contextual actions — use DropdownMenu
IDE / editor command context — use EditorPalette
Selecting one value from a list in a form — use Select / Combobox

Accessibility

Role: dialog

Props

Name	Type	Default	Description
`items`*	`array`	`—`	Commands offered by the palette.
`placeholder`	`string`	`Type a command or search…`	Placeholder for the search field.
`trigger_label`	`string`	`Open command palette`	Label for the button that opens the palette.

Examples

App command palette

A global launcher with shortcut hints.

YAML

type: command-palette
props:
  trigger_label: Open command palette
  items:
  - label: Create circle
    hint: C
  - label: Search elements
    hint: /
  - label: Open settings
    hint: ','
  - label: Invite teammate

Plain palette

Minimal palette, no hints.

YAML

type: command-palette
props:
  items:
  - label: New document
  - label: New folder

Edit YAML

context-menu

#existingsource

ContextMenu exposes actions for the object under the pointer. It keeps context actions keyboard-navigable and visually aligned with dropdown menus while preserving the right-click interaction pattern.

Readiness: complete
Preview: live
Props: 2
Examples: 1
Code: implementation mapped

When to use

Object-specific actions such as duplicate, archive, inspect, or delete
Dense canvases, graphs, and lists where secondary actions should stay tucked away
Power-user workflows that also have discoverable primary actions elsewhere

When not to use

Primary actions that every user must discover
Mobile-first interactions where right-click is unavailable
Navigation menus or product-level command palettes

Accessibility

Role: menu

Props

Name	Type	Default	Description
`items`*	`array`	`—`	Context actions in menu order.
`on_select`	`string`	`—`

Examples

Component row menu

Context actions for a component row.

YAML

type: context-menu
props:
  items:
  - label: Open
  - label: Duplicate
  - label: Delete
    danger: true
slots:
  trigger:
  - type: button
    props:
      variant: secondary
    slots:
      default: Right-click component

Edit YAML

date-picker-popup

#existingsource

A calendar overlay for picking a single date. Use it when date entry needs a consistent cross-browser look and full keyboard support: Arrow keys move the selection by day (left/right) and week (up/down), Enter commits, Escape closes; prev/next step the visible month. The month grid is computed without any date library so the component is self-contained.

Readiness: complete
Preview: live
Props: 4
Examples: 2
Code: implementation mapped

When to use

Single-date entry where the native control's look is unacceptable
Forms that need keyboard-navigable date selection
Surfaces that must look identical across browsers

When not to use

Date ranges — needs a dedicated range picker
Free-form date typing only — a masked text input is lighter
Relative dates ('last 7 days') — use a preset selector

Accessibility

Role: dialog

Props

Name	Type	Default	Description
`year`	`integer`	`2026`	Initial year shown.
`month`	`integer`	`1`	Initial month shown (1–12).
`selected_day`	`integer`	`—`	Optional pre-selected day of the initial month.
`trigger_label`	`string`	`Pick a date`	Label for the button that opens the picker.

Examples

Pre-selected date

May 2026 with the 17th pre-selected.

YAML

type: date-picker-popup
props:
  year: 2026
  month: 5
  selected_day: 17
  trigger_label: Pick a date

No selection

Empty month, nothing selected yet.

YAML

type: date-picker-popup
props:
  year: 2026
  month: 1
  trigger_label: Choose start date

Edit YAML

drawer

#existingsource

A modal surface anchored to one edge of the viewport. Use Drawer for secondary flows — filters, a detail inspector, contextual settings — where the user should stay oriented in the page behind it. Focus is trapped within the panel while open and restored on close; the scrim blocks interaction with the page until dismissed. The panel slides in from the chosen edge with a reduced-motion fallback.

Readiness: complete
Preview: live
Props: 3
Examples: 2
Code: implementation mapped

When to use

Filters or facets that refine the surface behind them
A detail inspector for the currently selected row
Contextual settings that don't deserve a route change

When not to use

A focused confirm / form task — use Dialog (centred modal)
Persistent workspace chrome — use a docked panel
A small anchored menu — use DropdownMenu or Popover

Accessibility

Role: dialog

Props

Name	Type	Default	Description
`title`	`string`	`Drawer`	Drawer heading and accessible name.
`side`	`enum: left \| right \| top \| bottom`	`right`
`trigger_label`	`string`	`Open drawer`	Label for the button that opens the drawer.

Examples

Filters drawer

Right-anchored filter drawer.

YAML

type: drawer
props:
  title: Filters
  side: right
  trigger_label: Open filters
slots:
  default: Filter controls go here.

Bottom sheet

Bottom sheet variant.

YAML

type: drawer
props:
  title: Details
  side: bottom
  trigger_label: Show details
slots:
  default: Detail content for the selected item.

Edit YAML

dropdown-menu

#existingsource

An anchored list of menu actions. Specialises Popover with menu semantics — arrow-key navigation, Enter-to-activate, Escape-to-close, optional type-to-jump for long menus. Use when the trigger should surface a list of actions. For non-menu anchored content, use Popover directly.

Readiness: complete
Preview: live
Props: 3
Examples: 1
Code: implementation mapped

When to use

Trailing-edge action menu on list rows ('…' button)
Top-bar account / settings menu
Context menu (right-click) — use ContextMenu sibling for that
Action overflow when a button row would crowd the toolbar

When not to use

Generic anchored overlay — use Popover (less menu-specific defaults)
Modal action confirmation — use Modal
Selecting a value from a list — use Select / SearchableSelect
Right-click — use ContextMenu (mouse-event-anchored variant)

Accessibility

Role: menu

Props

Name	Type	Default	Description
`open`	`boolean`	`—`
`on_close`	`string`	`—`
`items`	`array`	`—`	Menu items as { label, icon, on_click, disabled, divider } records. Pass an empty array if using slot-based children.

Examples

Row actions

Row-action menu on a list item.

YAML

type: dropdown-menu
props:
  open: ${state.row_menu_open}
  on_close: ${actions.close_row_menu}
slots:
  trigger:
  - type: icon-button
    props:
      title: Row actions
    slots:
      default:
      - type: icon
        props:
          name: more
  default:
  - type: text
    slots:
      default: Open
  - type: text
    slots:
      default: Rename
  - type: text
    slots:
      default: Archive
  - type: text
    slots:
      default: Delete

Edit YAML

info-tooltip

#existingsource

InfoTooltip annotates compact technical language without interrupting the layout. It pairs the term with a focusable info trigger so mouse, keyboard, and screen-reader users can reach the explanation.

Readiness: complete
Preview: live
Props: 2
Examples: 1
Code: implementation mapped

When to use

Metrics, model terms, and abbreviations that need plain-language help
Dense dashboards where inline helper copy would overwhelm scanning
Labels that are correct but not self-explanatory to new users

When not to use

Critical instructions that must be visible without hover or focus
Long documentation; link to docs or use a disclosure block instead
Interactive content inside the floating tooltip

Accessibility

Role: tooltip

Props

Name	Type	Default	Description
`term`*	`string`	`—`	Visible term being explained.
`explanation`*	`string`	`—`	Short plain-language explanation.

Examples

Metric help

Explain a dashboard percentile metric.

YAML

type: info-tooltip
props:
  term: p95 latency
  explanation: 95% of requests finish faster than this value.

Edit YAML

modal

#existingsource

An overlay focused on a single decision (sign-in, confirmation, edit). The backdrop is `inert` — keyboard cannot reach background content. Escape and backdrop click both fire `close`. Provide exactly one body via the body slot; optional header and footer slots size to their content.

Readiness: complete
Preview: live
Props: 5
Examples: 2
Code: implementation mapped

When to use

Single decision blocking the underlying view (sign-in, confirm, edit)
Forms requiring user's full attention before continuing
Destructive action confirmations (use ConfirmDialog variant)
Sheet/drawer patterns on mobile (`position: bottom`)

When not to use

Transient notifications — use Toast
Anchored helper content — use Popover
Persistent side regions — use PanelShell or Drawer
Full-screen takeover — use a route, not a modal
Blocking task warnings — consider in-flow Banner

Accessibility

Role: dialog

Props

Name	Type	Default	Description
`open`*	`boolean`	`—`	Whether the modal is shown. Bind to `${state.is_open}`.
`title`	`string`	`—`	Accessible title — wired to `aria-labelledby`. Always set even if a visual header is also rendered via the `header` slot, so screen readers know what dialog they're in.
`size`	`enum: small \| medium \| large \| extra_large \| full`	`medium`
`position`	`enum: center \| bottom \| right`	`center`	`bottom` slides up (mobile sheet pattern). `right` slides in (drawer pattern). Both still trap focus and inert the backdrop.
`dismissible`	`boolean`	`true`	When false, escape and backdrop click are ignored — only an explicit close action inside the modal can dismiss it. Use sparingly (e.g. for in-progress unsaved-work confirms).

Examples

Login modal

Login overlay, replacing the hand-built modal scaffolding.

YAML

type: modal
props:
  open: ${state.login_open}
  title: Sign in
  size: small
slots:
  header:
  - type: text
    props:
      kind: heading
    slots:
      default: Sign in to ${state.brand_name}
  body:
  - type: stack
    props:
      gap: md
    children:
    - type: field
      props:
        label: Username
      slots:
        input:
        - type: input
          props:
            value: ${state.username}
            on_input: ${actions.set_username}
    - type: field
      props:
        label: Password
      slots:
        input:
        - type: input
          props:
            value: ${state.password}
            on_input: ${actions.set_password}
            input_type: password
  footer:
  - type: button
    props:
      variant: primary
      type: submit
      loading: ${state.is_signing_in}
      on_click: ${actions.submit_login}
    slots:
      default: Sign in

Confirm delete

Destructive confirmation.

YAML

type: modal
props:
  open: ${state.confirm_open}
  title: Delete circle?
  size: small
  dismissible: true
slots:
  body:
  - type: text
    slots:
      default: This permanently removes the circle and its data. This cannot be undone.
  footer:
  - type: stack
    props:
      gap: sm
      direction: row
    children:
    - type: button
      props:
        variant: ghost
        on_click: ${actions.cancel_delete}
      slots:
        default: Cancel
    - type: button
      props:
        variant: danger
        on_click: ${actions.confirm_delete}
      slots:
        default: Delete circle

Edit YAML

popover

#existingsource

An anchored overlay that opens next to a trigger element. Unlike Modal, it does NOT trap focus or dim the background — keyboard users can tab past it. Use for inline editing, anchored helper UI, and inline filters. For menu-style action lists use DropdownMenu (purpose-built variant). For modal flows use Modal.

Readiness: complete
Preview: live
Props: 5
Examples: 1
Code: implementation mapped

When to use

Inline editing (e.g. quick rename without a modal)
Anchored helper UI (filter pickers, date pickers)
Detail expansion next to a trigger
Keyboard-shortcut hints (paired with InfoTooltip)

When not to use

Action menus — use DropdownMenu (better defaults for menu semantics)
Modal forms / confirmations — use Modal (focus trap + dim)
Tooltips for brief hover hints — use Tooltip (lighter, ARIA-tooltip role)
Persistent side regions — use PanelShell

Accessibility

Role: dialog

Props

Name	Type	Default
`open`	`boolean`	`—`
`on_close`	`string`	`—`
`position`	`enum: top \| right \| bottom \| left`	`bottom`
`align`	`enum: start \| center \| end`	`start`
`trigger`	`enum: click \| hover \| focus`	`click`

Examples

Quick rename

Inline rename popover.

YAML

type: popover
props:
  open: ${state.rename_open}
  on_close: ${actions.close_rename}
  position: bottom
  align: start
slots:
  trigger:
  - type: button
    props:
      variant: ghost
    slots:
      default: Rename
  default:
  - type: stack
    props:
      gap: sm
      direction: column
    children:
    - type: input
      props:
        value: ${state.new_name}
        on_input: ${actions.set_new_name}
        auto_focus: true
    - type: button
      props:
        variant: primary
        on_click: ${actions.commit_rename}
      slots:
        default: Save

Edit YAML

tooltip

#existingsource

An anchored helper text bubble that appears on hover AND focus. Use for short clarifications (truncated names, icon-button labels, terms of art). For technical-term explanations with a `?` trigger, use InfoTooltip (sibling, has explicit affordance). For longer interactive content, use Popover.

Readiness: complete
Preview: live
Props: 3
Examples: 2
Code: implementation mapped

When to use

Truncated text full value (text-overflow:ellipsis revealed)
Icon-button labels (paired with IconButton title prop)
Brief clarification of an unclear control
Keyboard shortcut display next to action affordances

When not to use

Long interactive content — use Popover
Mobile-only (tooltips don't work without hover) — use inline text
Content the user must read to operate the page — make it visible
Anything you can't read in <2s — too long for a tooltip

Accessibility

Role: tooltip

Props

Name	Type	Default	Description
`text`	`string`	`—`	Tooltip content.
`position`	`enum: top \| right \| bottom \| left`	`top`
`delay`	`integer`	`500`	Delay (ms) before tooltip appears on hover.

Examples

Truncated value

Tooltip on a truncated agent name.

YAML

type: tooltip
props:
  text: Acme Onboarding Automation v2
  position: top
slots:
  default:
  - type: text
    slots:
      default: Acme Onboarding…

Shortcut hint

Tooltip beside a keyboard shortcut hint.

YAML

type: tooltip
props:
  text: Open command palette
  position: bottom
slots:
  default:
  - type: kbd
    slots:
      default: ⌘K

Edit YAML

Overlays

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples

When to use

When not to use

Accessibility

Props

Examples