← Home

UI catalog

Curated `@kkb/ui` primitives, isolated demo islands, and the full audio player composition in one verification route.

Layout

5

Shell primitives, spacing helpers, and structural building blocks land here next.

Card + Aspect Ratio
Foundational surface styling plus a fixed-ratio media frame.
Release surface
Compact status panel using the base Card primitives directly.
ui-catalogstaged
section files4 added
statusready
media frame16:10

Aspect-ratio shell

A fixed canvas for screenshots, artwork, or embedded visual demos.

Item Group
List rows, separators, and compact metadata actions for stacked content.
Catalog shell

Sticky rail, section counts, and anchored headings.

core
Shared primitives

Reused by server-rendered examples and later client demo islands.

2 files
Curated coverage

Focused cards rather than an exhaustive export dump.

selected
Scroll Area + Separator
Dense, readable metadata lists inside constrained surfaces.

Surface padding

Primary demo card padding token used across the catalog.

24px

Reading width

Used for prose blocks and longer helper copy.

72ch

Rail width

Matches the desktop navigation column in the catalog shell.

220px
Resizable Panels
Adjustable workspace regions with explicit handles and constrained panel widths.

Inspector rail

Narrow metadata column for layout controls and release notes.

220px target

Preview canvas

Main surface stays flexible while the side panels compress first.

Drag the handle to rebalance the workspace.

Session notes

  • Keep section shells server-owned.
  • Hydrate only interaction-heavy surfaces.
  • Use explicit demo islands per primitive family.
Empty States
Roomy fallback presentation with icon media and balanced copy.
No blocks selected
Start with a scaffold card, then swap in a focused demo once the section is ready.

Input

6

Form controls and selection patterns arrive here once the core catalog cards ship.

Buttons
Primary actions, lower-emphasis affordances, and grouped choices.
Text Inputs
Straight fields plus richer grouped input affordances.
Filter
Choice Controls
Binary, exclusive, and preference-style controls in one compact surface.

Keeps section nav visible on desktop.

Release channel

OTP + Select
Structured entry plus a richer controlled select surface for preset choices.

Verification code

Active spacing preset: Comfortable

Calendar
Single-date picking with a compact month view and local selected state.
May 2026

Selected review date

Mar 21, 2026

Use a compact single-date picker when the flow needs lightweight scheduling.

Toggles + Slider
Quick state flips and continuous adjustment in one command surface.
Density

Feedback

4

Status, loading, and progress patterns will populate this section.

Alerts
Immediate status messaging for success, caution, and failure states.
Badges
Compact semantic labels for release state, scope, and emphasis.
stablepreviewserver-ownedblockeddraft
Progress + Spinner
Longer-running status feedback with both determinate and indeterminate affordances.
Core section coverage4 / 8

Final verification pass

Route-level checks now focus on browser QA and production validation.

Skeleton
Low-noise placeholders for cards and loading summaries.

Overlay

3

Dialogs, drawers, and contextual overlays stay isolated inside small demo islands.

Dialog + Sheet
Blocking modal confirmation plus a side-mounted supporting panel.

Modal dialog

closed

Use blocking confirmation flows when the next step needs explicit acknowledgement.

Side sheet

closed

Sheets keep supporting controls close without interrupting the main canvas.

Alert Dialog + Drawer
Destructive confirmation and mobile-first action trays in one overlay family.

Alert dialog

idle

Reserve destructive confirmation for actions that can’t be undone.

Mobile drawer

collapsed

Drawers work well for stacked actions on narrower screens and touch flows.

Popover + Hover Card + Tooltip
Contextual overlays for quick controls, previews, and terse helper copy.

Popover

closed

Small contextual surfaces fit filters, metadata, and quick secondary controls.

Data

4

Tables, inline code, shortcut patterns, and carousel cards with narrow local state.

Table
Structured comparison rows for compact release and primitive summaries.
Representative data-display coverage for issue #19.
PrimitiveRoleStatus
Tablestructured rowsserver-owned
Codeinline tokensstatic
Carouselmanual pagingclient island
Code
Inline monospace snippets for lightweight tokens, commands, and config fragments.

Use server-owned sections and explicit client demos to keep hydration narrow.

const sections = ["layout", "menu", "data"] as const;
Keyboard Shortcuts
Representative key patterns for command-style UIs without implying live route wiring.
Command palette pattern⌘K
Section jump patternGM
Carousel
Local slide data with manual navigation only.
shell

Server sections

Keep page structure on the server and isolate richer interaction inside small islands.

demo

Local data only

Slides stay static in-file so the demo remains narrow and predictable.

control

Manual navigation

Arrow controls are enough here. No autoplay, timers, or remote media.

Audio

4

Waveform, transport primitives, and the full player composition using live app wiring.

Waveform
Buffered seek surface with the shared audio styling and interactive progress.
Seek Surface0:14

buffered

71%

live seek
0:140:42
click waveform or use arrow keys
Playhead
Standalone progress marker for custom rulers, cue lanes, and mini timelines.
Transport Ruler38%
introdroptail
0:160:42
standalone marker for custom timelines
Player Controls
Transport, rate, and volume controls with local demo state.
Transportready
0:120:42
1x rate · 70 volume
Audio Composition
Real app wiring through PlayerClient and PlayerShell, rendered inside the catalog.
KKB Audio
—
0:00

Test Tone (AAC) — KKB • audio/mp4; codecs=mp4a.40.2

0:02
idle
|buf 0%
Playlist2 tracks