Components
Explore all 225 components available in the library.
Core
Avatar
Displays a user avatar image with fallback initials.
Badge
Small status label with variant styles.
Banner
Full-width announcement bar with variants, dismissal, and an optional action slot.
Button
Interactive button with multiple variants and sizes.
Checkbox
Toggle control for boolean input.
Copy Button
Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
Empty State
Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
Input
Text input field for forms.
Kbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
Radio Group
Group of radio buttons for single-selection input.
Separator
Visual divider between content sections.
Skeleton
Placeholder loading animation for content.
Slider
Range slider input for selecting numeric values.
Textarea
Multi-line text input field.
Toggle
Two-state toggle button.
Toggle Group
Group of toggle buttons for single or multiple selection.
Form
Calendar
Date picker calendar for selecting dates.
Category Filter
Filterable category selection for content lists.
Combobox
Searchable select input for choosing from a list of options.
Date Picker
Single-date picker built with the shared calendar and popover primitives.
File Upload
Dropzone-style file picker with previews for selected files.
Filter Bar
Horizontal bar with filter controls for content lists.
Form
Validation wrapper for composing labels, descriptions, controls, and messages.
Inline Input
Inline text input with keyboard commit and cancel support.
Input OTP
One-time password input with segmented fields.
Model Selector
Dropdown selector for choosing AI models.
Multi Select
Popover-based multi-selection input with selected-value badges and optional search.
Newsletter Signup
Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
Number Input
Numeric input with increment and decrement controls.
Password Input
Password field with a built-in visibility toggle.
Scope Selector
Multi-level scope picker for nested environments, teams, and targets.
Search Bar
Text search input with icon and clear functionality.
Segmented Control
Single-choice segmented selector for switching modes, views, or filters.
Select
Dropdown select input for choosing from a list of options.
Tags Input
Keyboard-friendly tag editor for adding and removing string values.
Timeline Scrubber
Range slider for scrubbing through canvas state playback, with optional milestone ticks.
Overlay
Alert Dialog
Modal dialog for confirming destructive or important actions.
Command
Command palette with search, groups, and keyboard navigation.
Context Menu
Right-click context menu with items and submenus.
Dialog
Modal dialog overlay for focused content and actions.
Drawer
Slide-out panel anchored to the screen edge.
Dropdown Menu
Accessible dropdown menu with items, checkboxes, radio groups, and submenus.
Edge Label
Inline edge label for relationship semantics such as streams, handoffs, or policies.
Hover Card
Card that appears on hover for previewing content.
Popover
Floating content panel anchored to a trigger element.
Sheet
Slide-over panel from the edge of the screen.
Toast
Temporary notification messages with action support.
Tooltip
Informational popup displayed on hover or focus.
Zoom HUD
Zoom controls with current percentage, increment buttons, and reset action for canvas views.
Navigation
Breadcrumb
Navigation breadcrumb trail showing the current page hierarchy.
Horizontal Scroll Row
Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.
Jarvis Dock
Floating bottom dock with quick-action buttons + a command-palette trigger.
Left Rail
Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
Menubar
Horizontal menu bar with dropdown menus.
Navbar SaaS
SaaS-style navigation bar with branding and links.
Navigation Menu
Accessible navigation menu with links and sub-navigation.
Pagination
Page navigation controls with previous, next, and page links.
Right Dock
Context dock for inspectors, summaries, and secondary canvas panels.
Sidebar
Collapsible sidebar navigation layout.
Sidebar Provider
Context provider for managing sidebar open/close state.
Sidebar Toggle
Responsive toggle button for opening and closing the sidebar.
Step Navigation
Navigation controls for stepping through multi-page content.
Tabs
Tabbed content panels with keyboard-accessible tab triggers.
Top Bar
Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
View Switcher
URL param-based toggle between named views with pill/tab styling.
Viewport Bookmarks
Saved-view list for the canvas — pinned spatial locations with optional active state.
Workspace Switcher
Segmented workspace picker for switching between canvas views and operational contexts.
World Breadcrumbs
Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs.
Data
Activity Heatmap
Contribution-style grid for visualizing operational activity over time.
Activity Log
Paginated activity feed for audit history and analytics changes.
Alert
Displays an alert message to the user.
Area Chart
Renders an area chart for data visualization.
Avatar Group
Overlapping avatar stack for participants, assignees, and collaborative contexts.
Bar Chart
Renders a bar chart for data visualization.
Bottom Activity Strip
Slim horizontally-scrolling row of recent canvas events for low-noise live activity.
Candlestick Chart
OHLC financial chart for session-by-session price action.
Comparison
Side-by-side comparison layout for content or features.
Countdown Timer
Countdown and SLA timer for deadlines, escalations, and response windows.
Data List
Semantic key-value metadata layout for displaying labels with values.
Data Table
Enhanced data table with sorting, filtering, selection, and pagination controls.
Flow Diagram
Interactive flow diagram with nodes, edges, and controls.
Gantt Chart
Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.
Heat Overlay
Heatmap-style overlay drawing soft radial blobs for canvas activity samples.
Line Chart
Renders a line chart for data visualization.
Live Feed
Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.
Market Treemap
Sector-style market heatmap using weighted tiles and signed performance colors.
Metric Cluster
Compact stack of related metrics pinned to a canvas object's corner.
Metric Gauge
Real-time arc and dial display for monitored percentages and utilization.
Mini Map Panel
Viewport overview panel showing canvas bounds, markers, and the current zoom window.
Order Book
Level II bid/ask depth ladder with cumulative size bars and spread readout.
Presence Stack
Overlapping live-presence avatars with status dots and a sane overflow chip.
Presence Sync Indicator
Compact pill that surfaces live connection + sync health for a collaborative canvas.
Progress Bar
Visual progress indicator with labels and completion state.
Progress Card
Card displaying progress metrics and status.
Run Timeline
Multi-lane execution timeline showing run phases over time, with optional cursor.
Severity Badge
Operational severity label with tone variants and optional pulse for critical incidents.
Sparkline Grid
KPI grid of labeled value tiles each paired with a compact sparkline trend.
Stat Card
Headline KPI card for metrics, trends, and supporting context.
Status Board
Service health grid for surfacing infrastructure state, queue pressure, and incidents.
Status Indicator
Compact status label with tone, variant, and activity dot options.
Sticky Metric
Pinned metric pill that sticks to a canvas object's corner.
Table
Styled data table with header, body, and footer sections.
Threshold Ring
Compact ring gauge expressing how close a value is to a threshold.
Ticker Tape
Marquee-style scrolling symbol tape with price and change badges.
Usage Breakdown
Ranked resource consumption list with relative share and trend cues.
Watchlist
Tracked-symbol list with price, change, and advancing/declining summary.
World Clock Bar
Multi-timezone display for follow-the-sun teams and operational handoffs.
Content
Accordion
Collapsible content sections supporting single or multiple open items.
Blog Card
Card layout for displaying blog post previews.
Callout
Highlighted content block with variant styles for info, warning, danger, and more.
Card
Container with header, content, and footer sections.
Carousel
Scrollable content carousel with navigation controls.
Code Block
Syntax-highlighted code display with copy support.
Code Playground
Interactive code editor with live preview.
Collapsible
Expandable and collapsible content section.
Content Intro
Introductory section for content pages with title and description.
Credit Badge
Balance status pill for credits, wallet states, and billing health.
Document Sibling Nav
Newer/older navigator: links to the previous and next item in an ordered series.
FAQ
Frequently asked questions section with expandable answers.
MDX Content
Renders MDX content with component mapping.
Object Card
Durable object view for agents, runs, artifacts, and tasks inside the canvas.
Object Inspector
Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.
Plan Badge
Subscription tier indicator for pricing, billing, and account summaries.
Policy Delivery Panel
Right-dock panel listing policies / guardrails active for the route or run.
Property Section
Compact key/value grid for inspector panels — labels, sublabels, optional collapse.
Relationship Inspector
Right-dock panel listing inbound + outbound edges of the focused canvas object.
Role Badge
Account role indicator for owners, admins, members, and billing contacts.
Routing Assignment Panel
Right-dock panel listing the agent slots an active route dispatches to.
Runtime Overview Panel
Top-of-dock summary tile grid for runtime health when no canvas object is selected.
Share Section
Social sharing buttons and link copy section.
Slideshow
Step-through slideshow for presenting content sequentially.
Subscription Card
Subscription status and management card for plan, renewal, and usage details.
Terminal
Terminal-style display for command output.
Timeline
Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines.
TLDR Section
Summary section for quick content overview.
Video Embed
Responsive video embed for YouTube and other providers.
Wallet Card
Credit balance display card for available, pending, and refresh details.
Learning
AI Chat Input
Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
AI Message Bubble
Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
AI Source Citation
Compact source reference card for AI answers with a title, origin label, and optional excerpt.
AI Streaming Text
Readable text block for partial assistant output with an optional live cursor while tokens stream in.
AI Tool Call Display
Structured card for tool invocation traces, statuses, serialized input, and returned output.
Annotation
Inline highlight with an attached contextual note.
Checklist
Interactive checklist with progress tracking and toggleable items.
Completion Dialog
Dialog displayed upon completing a task or workflow.
Exercise
Interactive exercise block for learning content.
Flashcard
Study card for active recall with prompt and answer states.
Key Concept
Highlighted definition block for key terms and a glossary list.
Keyboard Shortcuts Help
Displays available keyboard shortcuts to the user.
Learning Objectives
Lists learning goals for educational content.
Pro Tip
Highlighted tip block with variants for tips, best practices, gotchas, and more.
Profile Section
User profile display section with avatar and details.
Quiz
Interactive multiple-choice quiz with hints, explanations, and scoring.
Rating
Inline star rating for lightweight learner feedback.
Search Dialog
Full-screen search dialog with keyboard navigation.
Step By Step
Numbered step guide with optional interactive completion tracking.
Stepper
Sequenced steps with complete, current, and upcoming states.
Thinking Block
Collapsible block showing AI thinking/reasoning with streaming support.
Tour
Guided onboarding flow for introducing content or interface patterns.
Tutorial Card
Card for displaying tutorial previews with metadata.
Tutorial Complete
Completion screen displayed when a tutorial is finished.
Tutorial Filters
Filter controls for browsing tutorials by category or difficulty.
Tutorial Intro Content
Introduction section for tutorial pages with overview and prerequisites.
Tutorial MDX
MDX renderer tailored for tutorial content with custom components.
Utility
Alert Pulse
Pulsing ring overlay for alerting canvas objects, with severity tones.
Anchor Port
Port marker for object inputs, outputs, and bidirectional links on the canvas.
Animated Text
Staggered text reveal for headings, pull quotes, and short supporting copy.
Aspect Ratio
Constrains content to a specified aspect ratio.
Border Beam
Animated accent beam that travels around the border of a highlighted surface.
Canvas Shell
Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
Canvas View
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.
Comment Pin
Anchored discussion pin rendered at canvas coordinates with author + unread badge.
Connector Edge
Curved edge between canvas objects with optional inline label state.
Context Lens
Vignette overlay that dims the canvas outside a circular focus region.
Floating Action Button
Fixed-position action button for primary actions.
Group Hull
Durable boundary wrapper for related runtime objects sharing context or ownership.
Infinite Plane
Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.
Lang Provider
Context provider for language and internationalization.
Live Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip.
Marquee
Continuously scrolling content lane for badges, logos, and status chips.
Multi Select Lasso
Selection rectangle overlay for canvas multi-select gestures.
Number Ticker
Animated number transitions for stats, KPIs, and compact numeric callouts.
Object Handle
Drag/reposition affordance for spatial objects that need a calm grab target.
Playback Ghost
Translucent overlay marking where a canvas object was at a previous timestamp during playback.
Resizable
Resizable panel layout with draggable handles.
Scroll Area
Custom scrollable area with styled scrollbars.
Selection Presence
Dashed-border overlay marking what another user has selected on the canvas.
Spinner
Animated loading spinner indicator.
State Badge Overlay
State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.
Table Of Contents
Auto-generated table of contents from page headings.
Table Of Contents Panel
Side panel rendering a table of contents for page navigation.
Theme Provider
Context provider for light/dark theme switching.
Theme Toggle
Button to toggle between light and dark themes.
Thread Bubble
Expanded discussion bubble for an anchored canvas comment thread.