All components
136 components grouped by what they do. Search by name, tag or group.
Data & tables 11
-
Activity Feed
Real-time telemetry event stream with expandable audit payloads
-
Data Table
Sortable table with filters and expandable rows
-
Batch Gesture Tray
Spring floating tray with multi-select batch actions
-
Code Snippet Deck
Multi-language code runner snippet deck with live variable tuning
-
Dependency Trace
Interactive SVG node relationship & dependency tracer
-
Expandable Data Row
Table row that unfolds into account details
-
Timeline
Milestone & pipeline tracker with spring progress physics
-
Recovery Ledger
Version history timeline & state recovery ledger
-
Bulk Action Bar
Floating bulk-action toolbar for multi-item batch operations and export flows
-
Comparison Table
Interactive tier comparison matrix with difference filtering
-
Content Card
Linkable card with media, tags and status
Charts & metrics 9
-
Activity Heatmap
Responsive contribution calendar and weekday-by-hour activity grid
-
Animated Number Morph
Independent column digit rolling physics for metrics and financial dashboards
-
Bar Chart
Grouped and stacked bars with a filterable legend
-
Donut Chart
Animated SVG donut and gauge chart with a live center value
-
Funnel Chart
Conversion funnel with per-stage drop-off and a loss summary
-
Area Chart
Interactive area chart with range selection
-
Live Line Chart
Streaming line chart with pause and scrub
-
Metric Sparkline
Telemetry tile with a live-scrubbable sparkline
-
Stat Card
A KPI, its change and a sparkline in one tile
AI & chat 4
-
AI Agent Activity
Real-time AI agent tool call execution trace and reasoning timeline
-
AI Response
Production-ready streaming AI response with sources and actions
-
Chat
Conversation history, composer and message states
-
Thinking Orb
Minimalist monochrome particle vortex for AI interfaces
Media & effects 34
-
Matrix Clock
World time, one rolling matrix character at a time
-
Car Smoke Page Transition
Cinematic automotive page transition
-
Circular Orbit
Continuous circular orbit gallery with depth-aware tiles
-
Cursor Follower
Spring-damped pointer follower with custom icon content
-
Density Lens
Cursor-tracking magnification & detail inspection lens
-
Depth Corridor
CSS 3D perspective tunnel with progressive depth blur
-
Dot Field
Lightweight static Canvas particle matrix background
-
Dot Shader
Interactive GPU dot matrix background with cursor proximity shader dynamics
-
Hanging Amulet
Pointer-driven hanging amulet with layered spring physics
-
Focus Mode
Atmospheric UI isolation dimming background distractions without layout shifts
-
Glitch Text
Cybernetic glitch typography with 5 distinct kinetic animation modes
-
Glyph Matrix
Canvas-driven Matrix digital rain background with glowing phosphor trails.
-
Gravity Particle Burst
Pointer-driven gravity particle feedback
-
Folder Cards
macOS folder icon with fluid spring card reveal
-
Meteors
Luminous diagonal meteor trails streaming across cards and hero containers
-
Morphing Blob
Fluid spring-physics blob with cursor interaction
-
Icon Swap
Smooth cross-fade rotation morphing between two icons or states.
-
Hanging Charm
Pointer-driven hanging charm with layered spring physics
-
Package Box
Interactive 3D package box with flap folding and rising document motion
-
Particle Delete
Physics-driven pixel particle dissolution delete animation
-
Photo Box
Frosted paper box with fanning polaroids and tactile zoom inspection
-
Profile Card
Dark social profile card with painted blue cover art
-
Reveal Card
3D cursor physics tilt with interactive glare reveal
-
Scroll Velocity Text
Direction-aware kinetic text that expands and contracts with scroll
-
Shooting Stars
Deep space canvas cosmos with glowing shooting stars, radiant twinkling starfield, and interactive stardust
-
Sparkles
Zero-dependency GPU canvas particle sparkles with celestial stars, organic twinkle, and cursor reactions
-
Speed Warp
High-velocity 3D perspective starfield tunnel with canvas streaks.
-
Spotlight Card
Radial pointer tracking over dark layered surface
-
Stacked Cards
Scroll-driven sticky stacking cards
-
Sticky Pages
Static sticky full-page stacking scroll sections with clean physical shadows and natural release
-
Story Cards
Responsive interactive story cards carousel
-
Text Scramble Decoder
Controlled technical typography reveal
-
Torque Dial
Rotational control knob with physical spin momentum
-
Wallet Card
Dark wallet card with pointer-driven cyan shine
Feedback & status 15
-
Alert
Smooth height collapse on dismissal with tone styling
-
Badge
Rolling number animation & live status pulse
-
Status Island
Continuous physical morphing island with spring layout physics
-
Intro Loader
Apple-style multilingual greeting welcome splash
-
Loader
Calm continuous loading feedback
-
Shape Loader
Changing SVG shape loader
-
Not Found
Minimal spring-displaced 404 error experience with tactile proximity physics
-
Notification Bell
Notification badge and alert drawer
-
Toast Stack
Swipe-to-dismiss toast stack
-
Orbital Loader
Layered orbital loading indicator
-
Pull to Refresh
Elastic pull gesture with smooth interactive line charts and async lifecycle feedback
-
Confetti Burst
Lift-off milestone celebration with colorful confetti blast
-
Skeleton
Shimmering placeholder that reveals content
-
Undo Toast
Undo notification with a countdown
-
Notice Toast
Toast that slides in and settles
Forms & inputs 10
-
Animated File Upload
Physical drag-and-drop file uploader with per-file progress morphing
-
Calendar
Gliding selection pill & directional month slides
-
Combobox
Text input with a matching option list
-
Date Picker
Origin-aware popover with a spring landing
-
Checkbox
Checkmark draws itself, then settles
-
Form
Composable, accessible form primitives and controls
-
LockInput
Focus state that "locks" into place
-
OTP Input
Auto-advancing digit boxes with pop feedback
-
SpringSelect
Select menu that follows its trigger
-
StretchSwitch
Thumb stretches on press, then snaps
Navigation 21
-
Animated Tabs
Layout-spring sliding active pill indicator
-
Branching Submenu
Animated tree navigation with keyboard support
-
Breadcrumb
Gliding hover pill with animated trail expansion
-
Expandable Search
Compact spring width morphing search input
-
Action Dock
Magnifying action dock with spring feedback
-
Glass Navbar
Refined glass navigation with spring physics
-
Blob Menu
Liquid gooey spring dropdown menu with SVG filter physics
-
Hamburger Menu
Architectural line morphing & symmetrical spring motion
-
Expanding Search Field
Search field that expands from an icon
-
Morphing Mega Menu
Stripe-style morphing navigation panel with spring physics and cursor tracking
-
Dropdown
Origin-aware expansion
-
Pill Navigation
Minimal shared-pill navigation continuity with fluid submenus
-
Scroll Progress Navigation
Floating progress navigation pill tracking scroll depth and active document headings
-
Sidebar
Cursor-following hover pill & gliding active indicator
-
SlidePagination
Active indicator slides between pages
-
Compact Action Dock
Compact action dock with proximity scaling
-
Stepper
Animated connector line, gliding focus ring, and step panels
-
Theme Switcher
Light, dark or system, remembered
-
Docs TOC
On-this-page navigation with scroll-spy and a readable no-JS fallback
-
Page Nav
Previous and next document links with direction and titles
-
Site Footer
Page footer with brand, link columns and a legal row
Overlays & menus 9
-
Avatar Stack
Overlapping avatar pile with spring-animated hover elevation and tooltips.
-
Command Menu
Command palette grouped by category
-
Tooltip
Appears from its origin direction
-
Morphing Dialog
A card that expands into a dialog
-
Peek Card
Origin-anchored contextual preview card with edge-aware collision detection
-
Product Tour
Interactive walkthrough with spring spotlight cutout and responsive docking
-
SettleModal
Content scales and settles, never fades
-
Sheet
Drag-to-dismiss sheet with spring physics
-
Spotlight Search
Command overlay with a moving highlight
Buttons & actions 12
-
Book Call Button
Expanding accent pill with phone hover state
-
Button
Primary, secondary, outline, ghost and destructive actions
-
Drag to Confirm
Spring-resistant slider for confirming destructive or critical operations
-
Ripple Button
Pointer-origin liquid press feedback
-
Blob Toggle
Morphing liquid blob toggle
-
Magnetic Button
Cursor-aware spring translation physics
-
Morphing Button
Dimension-preserving state morphing button with fluid icon transitions
-
Neon Edge Button
Precise travelling edge light button
-
PressButton
Compresses slightly on press, then settles
-
Rainbow Button
Vibrant chromatic rainbow border button with animated glowing under-reflection
-
Split Button
A primary action with a chevron trigger for related actions.
-
Typewriter Button
Character-by-character reveal with mechanical sound feedback
Content & disclosure 4
-
FAQ
Searchable FAQ accordion with categories
-
Animated Accordion
Collapsible panels with eased height
-
Unfold Panel
Progressive disclosure card stack with spring height animation
-
Accordion
Panels that unfold with a chevron
Commerce & auth 7
-
Login
Refined authentication card with validation & social SSO
-
Money Card
Interactive financial wallet card with quick-send contacts and animated transfer sheets
-
Payment Receipt Printer
Animated thermal receipt printer with smooth paper extrusion motion
-
Payment Status
Refined transaction status card with self-drawing checkmark and receipt actions
-
Pricing
Minimal two-tier pricing that belongs in Detent
-
Sign Up
Multi-step capable user registration with strength telemetry
-
Wallet Balance
Interactive payment cards tucked into a leather pouch with eye-toggle balance obscuring
Routes
A static host also serves this file at these recorded paths.
/all-components#/components#/all-components