This is the live development preview for the apx-ds component library. Browse components from the sidebar, or jump straight to getting started, theming, or the optional icons package. Use the top bar controls to flip mode, variant, and direction in real time — every preview below reflects the current theme.
Step out of the docs and into a real product surface — full-page templates assembled from the same primitives, so you can feel the redesign end-to-end. Flip mode, swap variants, and toggle direction from a floating dock without leaving the preview.
We’re building in the open. Leave your email and we’ll let you know when new components land and when the first stable release is ready — no spam.
Discovered from packages/components/src/.
Disclosure-list primitive — a stack of collapsible sections. Single or multi-open, ARIA-pattern keyboard nav, CSS-grid auto-height transition (no JS measurement).
FeedbackInline status banner. The canonical feedback surface for info / success / warning / danger / neutral messages — auto-icon, optional title + description + action, Motion-driven dismiss.
LayoutCanonical product layout primitive. Composes four slots (header / sidebar / aside / footer) plus main content into a CSS-Grid-driven shell with two layout variants, responsive sidebar collapse to a Drawer on mobile, optional desktop rail-collapse, RTL-aware logical positioning, a skip-to-content link, and a
Data DisplayUser-identity glyph with image, initials, and icon fallback. Ships with deterministic name → color hashing, status indicator, accent ring, and an AvatarGroup that overlaps children into a stack with an optional
Data DisplayCompact stylistic primitive for status labels, counts, and tag-like chips. Four variants × seven colors × three sizes × three shapes — the purest stress test of the DS variant matrix.
NavigationNavigation-hierarchy primitive. Shows the user\
InputsTriggers an action or event. The reference component for apx-ds — exercises variants, sizes, colors, polymorphism, icons, loading, disabled, animation, RTL, and theme overrides.
InputsHeadless + DOM date primitive. Powers
SurfacesCompound content container. Root + Header / Body / Footer / Media / Divider subparts, with optional whole-card click, hover lift, selection ring, and horizontal
NavigationAccessible, keyboard- and touch-friendly carousel powered by CSS scroll-snap with a thin JS coordination layer. Zero new dependencies (no Embla / Swiper). Autoplay off by default; when enabled, always-visible pause/play (WCAG 2.2.2). Horizontal + vertical, responsive
InputsBoolean selection control. Visually-hidden native input + custom-painted indicator + label slot. Supports indeterminate, invalid, descriptions, three variants × seven colors × three shapes — the template for Switch and Radio.
FormVisual color form control: saturation/lightness square + hue slider + alpha + presets + tabbed hex/rgb/hsl text input. Includes <ColorSwatch /> for read-only chips and <ColorInput /> for text-only entry. Pure color math with no external library.
FormsSearchable-select primitive —
OverlaysThe ⌘K command launcher — a keyboard-first Modal overlay with a search input, filterable result list, sub-pages, recent-command surfacing, and a global hotkey to toggle visibility. Three registration paths (declarative
OverlaysImperative confirm dialog. Call
Data DisplayThe canonical data-display primitive of the DS — semantic
InputsSingle-date picker — composes
LayoutStyling primitive (
LayoutToken-mapped separator primitive. Horizontal or vertical rule, optional inline label (start/center/end), three thickness values and three border-color tokens. Renders
OverlaysEdge-anchored sliding panel. Modal\
FeedbackStandard layout for empty lists, no-results, first-run, error, success, and loading surfaces. Compound primitive — pass icon/illustration/title/description/actions as props for the 80% case or use the .Icon / .Illustration / .Title / .Description / .Actions subparts for full control. Loading variant auto-injects <Spinner />.
FormsForm-field composition wrapper that pairs a label, optional description, a single form control, and helper / error text. Four label positions (top / start / floating / hidden), required / optional indicators, fieldset / legend semantics for grouped controls, label addons, and start/end adornments. Integrates with every form control via FieldContext — zero source-code changes to any existing control.
FormDrag-and-drop file picker with per-file progress, retry/cancel, paste-to-upload, and a consumer-provided upload function. Includes <Dropzone /> as a headless primitive.
FormForm state engine — useForm hook + <Form> + <FormField> trio for managing values, errors, touched state, and submission. Pairs with <Field> for zero-prop-wiring forms.
OverlaysHover-triggered rich preview overlay — the canonical \u201cGitHub user card\u201d / \u201clink preview\u201d / \u201cdefinition popup\u201d primitive. Compound API (
PrimitivesLibrary-agnostic icon primitive. Three render modes (
MediaContent-imagery primitive: lazy by default, layout-stable via
InputsSingle-line text input. The canonical form-control surface — variants, sizes, colors, addons, icons, invalid + busy state, and the shared form-field a11y hook every later text control reuses.
OverlaysDropdown / context / hover menu primitive — Popover
OverlaysBlocking dialog overlay. Compound API (
NavigationHorizontal top-nav with dropdowns and mega-menus, with W3C Menubar keyboard support and animated active-state indicator.
InputsNumeric form control. Typed
NavigationStandalone page-navigation primitive. Two modes (page-numbered + cursor), four layouts (full / compact / pages-only / simple), an opt-in page-size Select, window-aware truncation with ellipses, ARIA
OverlaysInteractive floating panel — Tooltip\
SurfacesOpinionated pricing tier card. Wraps
FeedbackProgress indicators in two shapes —
InputsSingle-of-many selection control shipped with its
FormStar (or any glyph) rating form control. One component covers interactive (user picks a rating) and read-only (display an average) modes with full W3C Slider keyboard, half-step or fractional precision, RTL, and hidden-input form integration.
Data DisplayGoogle-Calendar-parity scheduling primitive — sibling Tier-3 component to
FormsForm-control combobox — the intersection of
LayoutVertical navigation rail with sections, items, badges, expandable groups, and rail mode.
FeedbackLoading placeholder primitive. Three exports on one shared recipe — block <Skeleton>, multi-line <SkeletonText>, and <Avatar>-size-matched <SkeletonAvatar>. Pure CSS shimmer / pulse / none, no Motion library, prefers-reduced-motion aware.
InputsNumeric range input — single or N-thumb. Horizontal + vertical orientation, optional marks + value bubble, full W3C Slider keyboard. Pure-CSS thumb animation (no Motion library). Hidden
FeedbackStandalone loading indicator primitive. Three pure-CSS variants (ring / dots / pulse), five sizes plus numeric escape hatch, seven palette role colors plus currentColor fallback, prefers-reduced-motion aware. No JS render loops, no Motion library.
FeedbackImperative full-screen splash. Call
LayoutFlex-based layout vocabulary.
Data DisplayDashboard metric tile with label, value, optional trend delta, and locale-aware numeric formatting via
NavigationMulti-step progress indicator for wizards, onboarding, and checkout flows. Three variants (numbered / dots / progress), five step statuses (pending / active / complete / error / loading), horizontal + vertical layouts, optional clickable + linear modes, and a compound
InputsBinary on/off toggle. Hidden-input + sliding-thumb pattern. CSS-only slide (no Motion lib), 3 variants × 7 colors × 2 shapes × 3 sizes, async-friendly
Data DisplayLightweight semantic
NavigationSectioned navigation primitive. Compound —
FormMulti-value text input that produces an array of string tags from typing, paste, and (optional) autocomplete suggestions. Free-form companion to MultiCombobox.
InputsMulti-line text input. Shares the form-control surface with Input (same variants, sizes, colors, focus-ring story) and adds auto-resize + an optional character counter. The DRY proof of the Phase 7 shared layer.
Data DisplayChronological event list for audit logs, activity feeds, order tracking, and version history. Vertical / horizontal / alternating layouts, five tones + active emphasis, locale-aware relative + absolute timestamps via
FeedbackTransient notification primitive with an imperative API.
FormsBinary-state button + segmented multi-button group. Standalone <Toggle> for one-off pressed-state affordances; <ToggleGroup type=
NavigationW3C-pattern action rail. Composes Buttons / Toggles / ToggleGroups / Menus into one accessible toolbar with a single Tab stop, arrow-key roving tabindex, RTL-aware navigation, optional ResizeObserver-based overflow → menu reflow, and optional auto-tooltip enrichment for iconic children.
OverlaysHover/focus hint primitive. First overlay consumer of the positioning engine — anchored placement with auto-flip, optional arrow, hover/focus delay state, and ARIA-correct describedby pairing with the trigger.
Data DisplayHierarchical tree primitive with the full W3C ARIA TreeView keyboard pattern. Two equivalent APIs (data-driven and compound
LayoutText primitive. A variant-driven