Components

Accordion

Expandable content sections with smooth disclosure behavior.

Alert

Contextual feedback message with default, glass, outline, and ghost variants.

Alert Dialog

Destructive action confirmation dialog with explicit cancel and action controls.

Avatar

Profile image with SVG-ready sources, fallback rendering, and multiple glass-aware surface variants.

Badge

Compact status indicator for labels, states, and counts.

Button

Action control with default, glass, liquid, matte, glow, outline, and ghost variants.

Card

Flexible surface container for grouped content.

Checkbox

Radix checkbox with glass, liquid, matte, and outline surface variants.

Chip

Compact pill-style tag for statuses and lightweight metadata.

Code

Inline code element for commands, snippets, and tokenized literals.

Command

Command palette for keyboard-driven actions and search.

Counter

Numeric badge that compacts overflow values like 99+.

Data Table

Feature-rich table wrapper with search, sorting, pagination, selection, and column controls.

Dropdown Menu

Action menu anchored to a trigger with keyboard navigation.

Heading

Semantic heading primitive with independent style scaling.

Hover Card

Preview card that appears on hover or focus with configurable delays and placement.

Icon Frame

Consistent framed surface for icon glyphs and short initials.

Input

Single-line input with glass, liquid, matte, and utility variants.

Kbd

Keyboard keycap primitive for shortcuts and key hints.

Label

Form label primitive with shared glass-aware variants.

Link

Tokenized anchor primitive with focus ring and variant surfaces.

Modal / Dialog

Layered dialog for focused tasks or confirmations.

Popover

Floating content panel anchored to a trigger element.

Progress

Determinate linear and circular progress indicators with tokenized variants and sizing.

Radio Group

Mutually exclusive selection control with variant-capable radio items.

Select

Native select with glass, liquid, matte, and utility variants.

Separator

Visual divider for grouping content with orientation support.

Sheet / Drawer

Sliding panel for side, top, or bottom contextual workflows.

Skeleton

Loading placeholder surface with reduced-motion fallback.

Slider

Range input control built on Radix slider primitive with glass thumb/track styling.

Status Dot

Colored status indicator with optional label and pulse state.

Switch

On/off control built on Radix switch primitive.

Table

Composable data table with semantic sections and glass variant support.

Tabs

Tabbed interface for switching between grouped content panels.

Text

Body text primitive for default, muted, and glass-highlighted copy.

Textarea

Multi-line input with glass, liquid, matte, and utility variants.

Toast

Glassmorphic toast notifications powered by Sonner with success, error, warning, info, loading, promise, and action support.

Tooltip

Context hint on hover/focus using Radix tooltip primitive.

Tree

Hierarchical tree view for file structures, navigation, and nested data.

Animated Gradient

Animated color-shifting gradient background with warm, cool, aurora, and glass presets.

Aurora Background

Animated gradient mesh backdrop with floating blurred blobs.

Blur Fade

Scroll-triggered entrance animation with blur, fade, and slide transitions.

Blur Spotlight

Cursor-following ambient glow effect for background layers.

Border Beam

Light beam that travels along the border of its container via CSS offset-path.

Chromatic Text

Text with chromatic aberration effect — RGB channel splitting.

Depth Card

Parallax tilt card with layered glass planes and glare effect on hover.

Dot Pattern

Static SVG dot grid background with configurable size, gap, and theme colors.

Floating Panel

Draggable glass panel with depth shadows and optional close button.

Glass Breadcrumb

Pill-style breadcrumb with glass indicators and collapsible items.

Glass Card

Frosted card with depth-aware blur, refraction edge highlights, and elevation transitions.

Glass Dock

macOS-style dock with proximity magnification and frosted glass surface.

Glass Navbar

Translucent navigation bar that responds to scroll with blur intensity.

Glass Toggle

Toggle switch with liquid fill animation and frosted glass surface.

Glow Border

Rotating conic-gradient glow effect around container border.

Gradient Mesh

Generative mesh gradient background using overlapping radial gradients.

Light Leak

Simulated lens flare and light leak overlay with drifting animation.

Liquid Button

Button with fluid hover lift, press squish, and radial shine effect.

Magnetic CTA

Call-to-action button with subtle cursor-attraction on hover.

Marquee

Infinite horizontal or vertical scrolling content with pause-on-hover support.

Meteor Shower

Falling diagonal streaks with staggered delays for hero backgrounds.

Morphing Tabs

Tab component with a smoothly sliding indicator that morphs between items.

Number Ticker

Animated number counter triggered by scroll visibility via IntersectionObserver.

Orbiting Circles

CSS-driven orbital animation that keeps children upright via double-rotate.

Particle Field

Ambient floating particle system with CSS-only staggered animations.

Prism Border

Animated rainbow refraction border using a shifting linear gradient.

Pulsating Button

Button with a pulsing glow ring animation for attention-grabbing CTAs.

Retro Grid

CSS perspective grid with scrolling lines for retro-futuristic backgrounds.

Reveal Text

Text that reveals through a clip-path wipe animation triggered on view.

Ripple Button

Button with liquid ripple effect on press.

Ripple

Concentric expanding rings radiating from center for decorative backgrounds.

Shimmer Button

Button with animated shimmer sweep overlay and glass-aware variants.

Spotlight

Full-page spotlight overlay for onboarding and feature highlighting.

Spotlight Card

Card with cursor-tracked radial spotlight effect on hover.

Text Reveal

Word-by-word opacity reveal driven by scroll position.

Typewriter

Character-by-character typing animation with blinking cursor and loop support.

Word Rotate

Cycling text animation that rotates through an array of words.