LEAP PM design system

Component playground

Every component below is driven by your interaction — nothing on this page is mock or static data. Real content arrives from the backend through typed props.

Back home

Surfaces

Flips data-surface and dir on <html>. The admin surface re-points the primary accent from sky blue to indigo; RTL flips every logical utility.

This button reads --color-leap-primary right now.

Button

Five surface-aware variants; the loading state embeds a Spinner and disables the control.

Badge

Pill badges in every semantic variant. The brand variant follows the surface accent.

successwarningdangerinfoneutralbrand

Spinner

The accent tone follows the surface; the light tone is for dark backgrounds.

LoadingLoadingLoading
LoadingLoading

Form controls

All five controls share the Field wrapper (label, hint, error, aria wiring) and the surface focus ring.

Echoed in the preview below

Live values straight from the controlled state:

{
  "name": "",
  "email": "",
  "bio": "",
  "agreed": false,
  "notifications": false,
  "level": "beginner"
}

Form (TanStack Form)

The app-wide useAppForm factory: a zod schema validates on submit and errors render through the design system's field wrappers.

Current value: 3

Live form state straight from TanStack Form:

{
  "name": "",
  "email": "",
  "proficiency": 3
}

DropdownMenu

Render-prop trigger keeps focus control with the menu: Escape returns focus to the trigger, arrows rove the items, outside pointerdown dismisses.

Tabs

Controlled tablist with roving arrow-key focus and count badges. The active panel is rendered by the consumer from the id.

Overview panel — keyed on the active tab id.

ProgressBar

Drag the slider — the bar clamps 0-100 and exposes role=progressbar with the aria values.

Pagination

Windowed page numbers around the current page; prev and next disable at the bounds.

Page 4 of 12

Skeleton

A shapeable pulse placeholder — size it entirely through className while real data loads.

MediaPlayer

Native video, audio, or a sandboxed embed — no player library. Pick a local file to preview it through an object URL.

Pick a file above to play it here.

FileDrop

Drag or browse to upload against the live staging backend (collection playground). The filenames below come straight from the decoded upload response.

Nothing uploaded yet — files you drop appear here.

Modal

Portals to body, closes on Escape and backdrop click, locks body scroll.

Opens over the whole page — including through the surface accent.

Toasts

Fires through the real ToastHost mounted at the root — stacked, auto-dismissed after 3s.

CommunityCard

Type the post; press Like and Save to drive the counters and tints. Actions render only when a handler is provided.

Loading

Timestamps mount client-side after hydration

CourseCard

Paste any image URL for the cover. Toggle enrolled to swap Enroll Now for Continue and show the progress bar.

beginner

EventCard

Pick a start time, switch the mode, and RSVP. The date tile and timestamps format through lib/datetime.

Loading

Timestamps mount client-side after hydration

JobCard

Fill the role in, save it, and hit Apply — every action is a real handler.

Loading

Timestamps mount client-side after hydration