Accessible button with primary, outline, ghost and destructive variants. Supports sizes sm / md / lg. Fully keyboard navigable.

Square icon-only button with tooltip. Used for toolbars, action bars and compact UIs.

Button that displays an inline spinner on async actions. Disables itself while loading to prevent double-submission.

Cyberpunk-style clipped button with neon hover glow. From the Holographic Glitch and Retro Cyberpunk templates.

Segmented control / button group for layout toggles and mode switches.

Styled text input with focus ring, label, and helper text. Works with any form library.

Multiline input with resize handle. Commonly used for messages and bio fields.

Native-enhanced dropdown select with custom styling. Keyboard accessible.

Animated boolean switch for settings and feature flags. Labels adapt to state.

Custom styled checkbox with animated checkmark. Matches your design token theme.

Styled HTML range slider with live value display. Uses CSS accent color tokens.

Accessible overlay dialog with backdrop blur, Escape to close, and focus-trap. Fully animated entry/exit.

Side-panel drawer sliding from right edge. Overlay backdrop, Escape to close. Perfect for mobile nav and settings panels.

Accessible hover tooltip with configurable placement. ARIA-annotated, keyboard-focusable trigger, zero dependencies.

Floating popover attached to a trigger element. Closes on outside-click and Escape. Great for context menus and rich tooltips.

Contextual action dropdown with keyboard navigation. Supports icons, dividers, destructive items, and sub-labels.

Searchable dropdown combobox with live filtering, keyboard navigation, and clear button.

Animated underline tab navigation for segmented views. Keyboard and ARIA compliant.

Semantic breadcrumb navigation with separator. Truncates long paths gracefully.

Page navigation with prev/next and numbered pages. Highlights current page with accent color.

Multi-step wizard progress indicator. Shows completed, active, and upcoming steps with connecting lines.

⌘K-style fuzzy-search command palette. Keyboard navigable list with category grouping.

Flexbox layout primitive for consistent vertical or horizontal spacing. The most-used layout utility.

Base content surface with consistent border, radius, and padding. Compose with any content.

Responsive CSS grid wrapper. Auto-fit columns adjust from 1-4 columns based on container width.

Horizontal rule with optional label. Useful for separating form sections or content blocks.

Labelled section heading with optional subtitle. Used to divide page content cleanly.

Hero-style page header with title, description, and action buttons. Top of every major page.

Compact status indicator with semantic color variants: default, success, warning, danger, info.

KPI metric card with trend indicator. Core SaaS dashboard primitive from Executive template.

Responsive data table with striped rows, hover state, and sortable column headers.

Circular user avatar with fallback initials, stacked group variant, and status dot.

Animated progress bar with label and percentage. Use for uploads, onboarding, or skill levels.

Placeholder screen for empty lists, error pages, or zero search results.

Stacked toast notification system with success, error, warning, and info variants. Auto-dismiss with animation.

Inline alert banner for errors, warnings, info, and success states. Dismissible with optional action button.

Animated linear progress bar with label. Supports indeterminate state for unknown durations.

Shimmer placeholder that mimics the shape of loading content. Drop-in replacement for any loading state.

Status and count badges. Variants: default, success, warning, error, info. Supports dot-only mode.

6-digit OTP / PIN entry with auto-advance focus, paste support, and accent border on fill. Common in auth flows.

Command-palette-style search box with keyboard shortcut badge, clear button, and animated focus ring.

Multi-value tag/chip input — type and press Enter or comma to add, click × to remove. Great for labels, tech stack fields.

Complete login form with live field-level validation, strength meter on password, and accessible error messages.

Drag-and-drop file upload zone with hover state, file type validation, and animated progress preview.

Dual-handle price range slider with live value labels, accent track fill, and smooth animation.

Styled radio button group with card-style options. Ideal for plan selection, size pickers, or settings.

Sortable, filterable data table with column headers, search, and row hover. Copy-paste for any admin dashboard.

Numeric page navigator with prev/next arrows, ellipsis for large ranges, and accessible active state.

Timestamped event timeline with avatar, action type, and relative time. Used in GitHub-style dashboards and audit logs.

Grouped notification panel with unread count, mark-all-read, and categorized notification types.

Avatar-triggered user menu with profile info, navigation links, and sign out. Common in app headers.

⌘K command palette with fuzzy search, categorized commands, and keyboard navigation. Inspiration from Linear, Vercel, and Raycast.

Three plug-and-play hero variants: centered gradient, split image, and minimal. Just swap text and ship.

Two CTA block variants: full-width gradient banner and dark card with side layout. Drop at page bottom to convert.

Infinite auto-scrolling logo marquee for social proof. Pause on hover, responsive, and CSS-only animation.

Full FAQ section with searchable questions, smooth animated answers, and schema markup ready. Drop anywhere.

Two footer variants: minimal centered and full multi-column with links, social icons, and copyright.

Article card layout with category badge, author avatar, read time, and hover lift. Copy-paste for any blog or changelog.

Structured content card that AI can parse, modify, and regenerate. Each field has a stable data-ai-field attribute for LLM targeting.

JSON schema → fully rendered form. AI agents can generate or modify the schema to instantly produce forms. No JSX required.

A semantic boundary wrapper that marks content as AI-readable or AI-protected. Uses data attributes as structured signals for LLM tools.

Config-object → page section. AI agents write JSON, CSEdge renders the UI. The foundation for AI-generated landing pages.