Skip to content

Docs Components Blocks Motion

Getting started

Introduction Installation Theming Motion Usage Compatibility Build a chat Apps and PWAs UI for Agents

Components

AI

Aurora Chat Input Chat Bubble Streaming Text Reasoning Tool Call Sources Message Actions Plan Nudge Aura Tile Voice Orb Waveform Prompt Suggestions Thinking Presence Conversation Feedback Prompt Call Controls Audio Player Greeting

Motion

Motion Text Reveal Text Rotate Number Ticker Marquee Text Scramble Typewriter Wave Text Spoiler Highlight Code Morph Icon Morph Confetti Tilt Card Spotlight Card Flip Card Lens Sticky Stack Carousel 3D Logo Orbit Dot Grid

App

Tab Bar Install Prompt Network Status Dynamic Island Pull to Refresh Story Progress

Actions

Button Badge Button Group Hold Button Copy Button Upload Button Download Button Async Button Send Button Slide to Confirm Share Button Like Button Star Button Bookmark Button Follow Button Reactions Notification Bell Theme Toggle

Forms

Input Textarea Label Checkbox Radio Group Switch Slider Select Combobox Toggle Toggle Group Input OTP Input Group Field Native Select Calendar Range Calendar Date Picker Rating Tags Input Segmented Control Number Input Password Input Floating Label Email Input Expanding Search Inline Edit File Dropzone Color Swatches Color Picker Wheel Picker Shortcut Recorder

Surfaces

Card Alert Separator Avatar Scroll Area Aspect Ratio Table Empty Item Kbd Carousel Resizable Data Table Timeline Swipe Deck Expanding Card Sortable Kanban Drag Select Compare Slider Code Block Image Hotspots Avatar Stack

Data

Sparkline Bar Chart Donut Chart Heatmap Stat Leaderboard Uptime Bar Relative Time

Overlays

Dialog Popover Tooltip Alert Dialog Sheet Drawer Hover Card Confirm Popover Selection Toolbar Link Preview Shortcut Sheet

Menus

Dropdown Menu Context Menu Menubar Navigation Menu Command

Navigation

Tabs Accordion Collapsible Breadcrumb Pagination Sidebar Stepper Tree Dock Link Page Dots Back to Top Reading Progress Scroll Spine

Feedback

Progress Skeleton Spinner Circular Gauge Toast Meter Banner Checklist Save Status Live Indicator

Lens

Motion

A lens follows your cursor and reveals what is hidden underneath.

Previous Flip Card Next Sticky Stack