Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

UI — components

Index of every shipped component, grouped by the same product-surface subfolders as crates/ui-storybook/src/components/. New components must land in the matching subgroup AND have at least one story registered in stories::all_stories().

Linear: AUT-120

Subgroup map

SubgroupSubfolderTickets
Primitivescomponents/primitives/UI-01 / UI-04
Shellcomponents/shell/UI-02
Menuscomponents/menus/UI-03 / UI-05 / UI-10
Recordercomponents/recorder/UI-06..13
Librarycomponents/library/UI-14 / UI-15
Editorcomponents/editor/UI-16..19 (+ existing dope sheet, player)
Cursorcomponents/cursor/UI-20 / UI-21

Primitives

Button

Variants: Default, Outline, Ghost, Destructive, Secondary. Sizes: Sm, Md, Lg. Disabled state.

Open as live demo →

Button sizes

Open as live demo →

Card

Card, CardHeader { title, subtitle }, CardBody. Composable surface container — used everywhere the editor groups controls.

Open as live demo →

Shell

Drop zone

States: Idle, Active. Used as the editor's empty state and as the "drag your recording here" surface.

Status bar

Kinds: Ready, Busy, Error. Bottom-of-window strip — FPS, encoder, file size, transient detail line.

Recorder

Recording toolbar

States: Idle, Recording, Paused. The legacy single-row toolbar; the new compositions (UI-11 footer, UI-12 tray popover) live alongside it.

Editor + Player

  • Dope sheet — full chapter with multi-track + dense variants.
  • PlayerControls — three positions (paused at start / playing mid-clip / near end of clip).
  • editor-mock composition.

Empty in UI-00 — the follow-up tickets land components into these subgroups:

  • Menus: UI-03 (MenuShell, MenuItem, popover anchors), UI-05 (WorkspaceSwitcherMenu), UI-10 (OnScreenOptionsPopover).
  • Library: UI-14 (LibrarySidebar + storage meter), UI-15 (RecordingCard + LibraryGrid).
  • Cursor: UI-20 (CursorStudioShell + style picker), UI-21 (CursorPreviewCanvas).