Get Started Philosophy Components

Get Started Philosophy Components

Avatar Badge Banner Button Checkbox Copy Button Empty State Input Kbd Radio Group Separator Skeleton Slider Textarea Toggle Toggle Group

Calendar Category Filter Combobox Date Picker File Upload Filter Bar Form Inline Input Input OTP Model Selector Multi Select Newsletter Signup Number Input Password Input Scope Selector Search Bar Segmented Control Select Tags Input Timeline Scrubber

Alert Dialog Command Context Menu Dialog Drawer Dropdown Menu Edge Label Hover Card Popover Sheet Toast Tooltip Zoom HUD

Breadcrumb Horizontal Scroll Row Jarvis Dock Left Rail Menubar Navbar SaaS Navigation Menu Pagination Right Dock Sidebar Sidebar Provider Sidebar Toggle Step Navigation Tabs Top Bar View Switcher Viewport Bookmarks Workspace Switcher World Breadcrumbs

Activity Heatmap Activity Log Alert Area Chart Avatar Group Bar Chart Bottom Activity Strip Candlestick Chart Comparison Countdown Timer Data List Data Table Flow Diagram Gantt Chart Heat Overlay Line Chart Live Feed Market Treemap Metric Cluster Metric Gauge Mini Map Panel Order Book Presence Stack Presence Sync Indicator Progress Bar Progress Card Run Timeline Severity Badge Sparkline Grid Stat Card Status Board Status Indicator Sticky Metric Table Threshold Ring Ticker Tape Usage Breakdown Watchlist World Clock Bar

Accordion Blog Card Callout Card Carousel Code Block Code Playground Collapsible Content Intro Credit Badge Document Sibling Nav FAQ MDX Content Object Card Object Inspector Plan Badge Policy Delivery Panel Property Section Relationship Inspector Role Badge Routing Assignment Panel Runtime Overview Panel Share Section Slideshow Subscription Card Terminal Timeline TLDR Section Video Embed Wallet Card

AI Chat Input AI Message Bubble AI Source Citation AI Streaming Text AI Tool Call Display Annotation Checklist Completion Dialog Exercise Flashcard Key Concept Keyboard Shortcuts Help Learning Objectives Pro Tip Profile Section Quiz Rating Search Dialog Step By Step Stepper Thinking Block Tour Tutorial Card Tutorial Complete Tutorial Filters Tutorial Intro Content Tutorial MDX

Alert Pulse Anchor Port Animated Text Aspect Ratio Border Beam Canvas Shell Canvas View Comment Pin Connector Edge Context Lens Floating Action Button Group Hull Infinite Plane Lang Provider Live Cursor Marquee Multi Select Lasso Number Ticker Object Handle Playback Ghost Resizable Scroll Area Selection Presence Spinner State Badge Overlay Table Of Contents Table Of Contents Panel Theme Provider Theme Toggle Thread Bubble

›Playground

Border Beam Playground

Animated accent beam that travels around the border of a highlighted surface.

Back to component

Loading playground...