Components Overview

Interactive button with ripple effects, glowing borders, and loading states.

Input

Text inputs with animated labels, icons, error states, and clear triggers.

Switch

Smooth sliding toggle switch with spring physics and accessible state.

Slider

Fluid range controller with dual thumbs, tooltip values, and stepped values.

Rating

Interactive star rating with fractional stars, hover animations, and presets.

File Upload

Drag-and-drop file uploader with size validation, progress, and preview.

Card

Modular container with border glow, glassmorphism, and header/footer slots.

Accordion

Collapsible disclosure panels with smooth height transitions and icons.

Tabs

Tabbed content navigation with animated active pill and keyboard navigation.

Table

High performance data table with sorting, pagination, and selection.

Stepper

Multi-step flow indicator with completed states, errors, and animations.

Scroll Area

Customized scrollable container with styled native and smooth scrollbars.

Navigation

Responsive navbar header and breadcrumb trail for modern apps.

Dock

macOS-inspired magnify-on-hover dock menu with physics calculations.

Data Display

Structured key-value grids, stats blocks, and summary list cards.

Modal / Dialog

Accessible modal overlay with focus trapping, backdrop blur, and drawer modes.

Alert

Callout banner for status notifications, warnings, errors, and tips.

Badge

Compact indicator tag with pulse radar, variant styles, and count badges.

Avatar

User picture with fallback initials, status dots, and stacked group rings.

Tooltip

Instant contextual helper tooltip with micro-animations and arrow pointers.

Progress

Linear and circular progress meters with indeterminate and stepped states.

Skeleton

Fluid shimmer loading placeholder for images, text blocks, and avatars.

Loaders

Collection of spinners, orbital rings, and pulse wave loading indicators.

Thinking Indicator

AI

Multi-orbit gradient wave with continuous hue shifts for AI reasoning.

Tool Call Card

AI

Agent function execution widget with live streaming payload drawers.

Agent Status Pill

AI

Ultra-compact AI assistant status pill with radar pulse and quick states.

Command

Fast command palette with fuzzy search, keyboard shortcuts, and groups.

Marquee

Infinite horizontal and vertical content scroller with pause-on-hover.

Number Ticker

Scroll-triggered rolling counter for statistics and metrics.

Animated Number

Smooth spring-interpolated transitions when numerical values change.

Typing Animation

Realistic typewriter text effect with blinking cursor and loop controls.

Blur Fade

Staggered blur-in and fade-in entrance wrapper for content grids.

Box Reveal

Curtain sliding block reveal animation for hero titles and cards.

File Preview Card

Interactive media card with download buttons and full preview overlays.

Image Compare

Before and after comparison slider with touch and drag support.

Premium Effects

Glow halos, meteor animations, and glassmorphic surface presets.

Charts

Interactive SVG area, line, and bar charts tailored for dark mode.

Commerce

E-commerce checkout cards, pricing tables, and product visualizers.

Dark Mode Toolkit

Theme switches, auto-detect hooks, and system color sync tools.

Cookie Consent

GDPR compliant cookie notification banner with granular preferences.

Social

Social comment thread blocks, share dialogs, and user cards.