Components

Interactive button with four visual variants, three sizes, loading state, and Radix asChild support.

Accessible checkbox built on Radix UI with optional label and error state.

Single-line text input with size presets and accessible error state with inline message.

Radio button group built on Radix UI RadioGroup. Size and error state propagate to all items via context.

Accessible dropdown select built on Radix UI. Keyboard navigable with search, grouping, and error state support.

Toggle switch built on Radix UI with optional label and error state.

Round image display with automatic initials fallback when image is missing or fails to load.

Inline label for status, counts, or categories.

Inline feedback banner for status messages. Uses role="alert" for errors/warnings and role="status" for info/success.

Loading placeholder with pulse animation. Supports text (single or multi-line), circular, and rectangular shapes.

Ephemeral overlay notification built on Radix UI. Wrap app with ToastProvider + ToastViewport once, then render Toast anywhere.

Animated visual backgrounds: starfield, galaxy with nebula glow, milky way wave ribbons, mesh gradient, or solid color.

Content container with optional hover lift effect. Compound component with header, content, and footer slots.

Site footer with grid content layout. Compound component with content area, divider, and bottom bar.

Flexible site header with sticky positioning, backdrop blur, and responsive mobile hamburger menu.

CSS grid layout for full pages with single, sidebar-left, sidebar-right, and three-column presets.

Semantic <section> wrapper with max-width presets and vertical padding control. Centers content within a max-width container.

Visual divider between content sections. Horizontal or vertical, decorative or semantic.

Flexbox layout primitive for composing vertical or horizontal stacks with spacing token gaps.

Accessible breadcrumb navigation with nav[aria-label="breadcrumb"] and aria-current="page" support.

Embla-powered content carousel with accessible slide announcements, keyboard support, compound controls, and default edge bleed tuned for clean multi-slide layouts.

Tabbed content panels built on Radix UI. Keyboard navigable with line (underline) or solid (pill) visual variants.

Accessible modal dialog with animated overlay, built on Radix UI. Focus trapped, scroll locked, and keyboard-navigable.

Hover tooltip built on Radix UI. Wrap app with TooltipProvider once.

Semantic h1–h6 element with configurable visual size, weight, and alignment. Decouples visual appearance from semantic level.

Polymorphic body text primitive. Renders as p, span, div, or label with size, weight, color, and truncation control.