Core UI

Expand/collapse FAQ list with measured-height animation, single or multi-open modes, and arrow-key navigation between headers.

React

AuroraGlassFooter — dark footer with a drifting-blob mesh, a pointer-follow spotlight, and a glass contact/newsletter/social card with a rotating gradient border.

Astro

AuroraMegaMenuHeader — one-bar header with a cursor-follow spotlight, an animated gradient hairline, and glass mega-menu panels with a rotating gradient border.

React

Single avatar or an overlapping stack with a plus-N overflow chip, falling back to deterministic initials-over-tint when no image is given.

Astro

Floating button that fades in past a scroll threshold and scrolls to top, instantly under reduced motion.

React

Single pill component covering solid, soft, and outline badge variants across brand and semantic tones, with an optional removable tag mode.

Astro

Static breadcrumb trail with BreadcrumbList microdata that collapses the middle segments into an ellipsis on long paths.

Astro

One button primitive covering primary/secondary/ghost/destructive variants, three sizes, a loading spinner state, and an icon-only mode.

Astro

A labelled multi-choice group built on native checkboxes, with optional descriptions, per-option disabled state, and controlled or local array values.

React

A single disclosure panel with controlled or local state, native button keyboard behavior, reduced-motion support, and a Velocity theme transition.

React

Bottom consent bar with accept-all, reject-all, and an inline expandable preferences checklist, persisted to localStorage.

React

Scrollable data table with a sticky header row and client-side column sorting that cycles ascending, descending, and unsorted.

React

EditorialMegaMenuHeader — quiet bar, loud panels (Stripe/Figma docs-nav reference).

React

EditorialSitemapFooter — dense, confident editorial sitemap (Stripe/Figma footer reference).

Astro

Centred placeholder for an empty list, table, or panel with an icon slot, title, description, and action slot.

Astro

Brand column with description and social icons alongside N link columns, plus a bottom legal bar with copyright and policy links.

Astro

Sticky header that crossfades from transparent to a blurred solid bar after a scroll threshold, with primary links and a CTA.

React

Static inline banner covering info, success, warning, and error severities with the correct assertive/polite ARIA role per severity.

Astro

Composes a native input, select, or textarea with visible prefix and suffix addons, using Velocity theme tokens and native form semantics.

Astro

Shimmer skeleton placeholders for text lines, an avatar row, a card, and a table row, with the shimmer disabled under reduced motion.

Astro

Multi-column dropdown panel triggered from a nav item, with link columns plus an optional featured card, closing on outside click or Escape.

React

Left-docked full-height nav drawer with focus trap, outside-click close, Escape handling, scroll lock, and focus restoration.

React

A progressive-enhancement reveal wrapper that animates content as it enters the viewport, using native IntersectionObserver and Velocity motion tokens.

Astro

A progressively enhanced staggered reveal for marked child elements, using native IntersectionObserver and Velocity motion tokens.

Astro

Controlled numbered pager with ellipsis compression for large page counts and prev/next controls.

React

Click-triggered floating panel for rich content that closes on outside click or Escape and restores focus to the trigger.

React

Keeps a React subtree mounted for its CSS exit transition, then unmounts it with reduced-motion support, re-entry cancellation, and inert exiting content.

React

Three-column pricing grid with one visually highlighted plan that scales up and sits on a brand-tinted card.

Astro

Linear bar and circular ring progress indicator in one component, each with a determinate and an indeterminate mode.

Astro

A labelled single-choice group built on native radio inputs, with optional descriptions, disabled options and controlled or local state.

React

The house data-entry surface — right-docked drawer on desktop, three-snap-point draggable bottom sheet on mobile, with focus trap and a dock-minimise control.

React

Horizontal multi-step progress indicator with a filling connector line, collapsing to a compact step-count bar on phone.

Astro

A single on/off setting backed by a native checkbox, with switch semantics, optional description and controlled or local state.

React

Keyboard-accessible tab list with an animated active indicator, switchable between underline and pill visual variants via one prop.

React

A labeled native input with supporting and error text, required and disabled states, and linked accessible descriptions.

React

A labeled native multiline input with supporting and error text, required and disabled states, and linked accessible descriptions.

React

Notification stack with a module-level push/dismiss API, pausable auto-dismiss timer, and swipe-to-dismiss on touch.

React

A single on/off action with native button keyboard behavior and an accessible pressed state. Use it for toolbar controls such as pin, favourite or preview mode.

React

ToolbarDockHeader — dark, dense, icon-first toolbar header (Figma/Photoshop control-bar aesthetic).

React

ToolbarTerminalFooter — Figma/Photoshop control-bar aesthetic translated into a footer: a slim top TOOLBAR strip (logo + contact chips), the sitemap rendered as bordered PANELS over a faint dot-grid canvas, a terminal-styled newsletter panel, and a slim bottom STATUS BAR strip (legal + a continuous CSS ticker, no GSAP).

Astro

Hover/focus label that computes its own placement and flips side on viewport overflow, with no positioning library.

React

Side-stacked tab list with a content pane, for settings-style layouts, with up/down arrow keyboard navigation.

React