Components
Explore all 225 components available in the library.
Core
Avatar
Displays a user avatar image with fallback initials.
1 storyBadge
Small status label with variant styles.
4 storiesBanner
Full-width announcement bar with variants, dismissal, and an optional action slot.
6 storiesButton
Interactive button with multiple variants and sizes.
9 storiesCheckbox
Toggle control for boolean input.
1 storyCopy Button
Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
4 storiesEmpty State
Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
4 storiesInput
Text input field for forms.
1 storyKbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
6 storiesRadio Group
Group of radio buttons for single-selection input.
1 storySeparator
Visual divider between content sections.
1 storySkeleton
Placeholder loading animation for content.
1 storySlider
Range slider input for selecting numeric values.
1 storyTextarea
Multi-line text input field.
1 storyToggle
Two-state toggle button.
4 storiesToggle Group
Group of toggle buttons for single or multiple selection.
1 storyForm
Calendar
Date picker calendar for selecting dates.
1 storyCategory Filter
Filterable category selection for content lists.
1 storyCombobox
Searchable select input for choosing from a list of options.
2 storiesDate Picker
Single-date picker built with the shared calendar and popover primitives.
2 storiesFile Upload
Dropzone-style file picker with previews for selected files.
1 storyFilter Bar
Horizontal bar with filter controls for content lists.
1 storyForm
Validation wrapper for composing labels, descriptions, controls, and messages.
2 storiesInline Input
Inline text input with keyboard commit and cancel support.
1 storyInput OTP
One-time password input with segmented fields.
1 storyModel Selector
Dropdown selector for choosing AI models.
1 storyMulti Select
Popover-based multi-selection input with selected-value badges and optional search.
3 storiesNewsletter Signup
Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
5 storiesNumber Input
Numeric input with increment and decrement controls.
1 storyPassword Input
Password field with a built-in visibility toggle.
1 storyScope Selector
Multi-level scope picker for nested environments, teams, and targets.
2 storiesSearch Bar
Text search input with icon and clear functionality.
1 storySegmented Control
Single-choice segmented selector for switching modes, views, or filters.
3 storiesSelect
Dropdown select input for choosing from a list of options.
1 storyTags Input
Keyboard-friendly tag editor for adding and removing string values.
3 storiesTimeline Scrubber
Range slider for scrubbing through canvas state playback, with optional milestone ticks.
4 storiesOverlay
Alert Dialog
Modal dialog for confirming destructive or important actions.
1 storyCommand
Command palette with search, groups, and keyboard navigation.
1 storyContext Menu
Right-click context menu with items and submenus.
1 storyDialog
Modal dialog overlay for focused content and actions.
1 storyDrawer
Slide-out panel anchored to the screen edge.
1 storyDropdown Menu
Accessible dropdown menu with items, checkboxes, radio groups, and submenus.
1 storyEdge Label
Inline edge label for relationship semantics such as streams, handoffs, or policies.
1 storyHover Card
Card that appears on hover for previewing content.
1 storyPopover
Floating content panel anchored to a trigger element.
1 storySheet
Slide-over panel from the edge of the screen.
3 storiesToast
Temporary notification messages with action support.
3 storiesTooltip
Informational popup displayed on hover or focus.
1 storyZoom HUD
Zoom controls with current percentage, increment buttons, and reset action for canvas views.
1 storyNavigation
Breadcrumb
Navigation breadcrumb trail showing the current page hierarchy.
1 storyHorizontal Scroll Row
Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.
2 storiesJarvis Dock
Floating bottom dock with quick-action buttons + a command-palette trigger.
4 storiesLeft Rail
Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
1 storyMenubar
Horizontal menu bar with dropdown menus.
1 storyNavbar SaaS
SaaS-style navigation bar with branding and links.
1 storyNavigation Menu
Accessible navigation menu with links and sub-navigation.
1 storyPagination
Page navigation controls with previous, next, and page links.
1 storyRight Dock
Context dock for inspectors, summaries, and secondary canvas panels.
1 storySidebar
Collapsible sidebar navigation layout.
1 storySidebar Provider
Context provider for managing sidebar open/close state.
1 storySidebar Toggle
Responsive toggle button for opening and closing the sidebar.
1 storyStep Navigation
Navigation controls for stepping through multi-page content.
1 storyTabs
Tabbed content panels with keyboard-accessible tab triggers.
1 storyTop Bar
Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
1 storyView Switcher
URL param-based toggle between named views with pill/tab styling.
1 storyViewport Bookmarks
Saved-view list for the canvas — pinned spatial locations with optional active state.
4 storiesWorkspace Switcher
Segmented workspace picker for switching between canvas views and operational contexts.
1 storyWorld Breadcrumbs
Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs.
4 storiesData
Activity Heatmap
Contribution-style grid for visualizing operational activity over time.
3 storiesActivity Log
Paginated activity feed for audit history and analytics changes.
2 storiesAlert
Displays an alert message to the user.
2 storiesArea Chart
Renders an area chart for data visualization.
Avatar Group
Overlapping avatar stack for participants, assignees, and collaborative contexts.
2 storiesBar Chart
Renders a bar chart for data visualization.
Bottom Activity Strip
Slim horizontally-scrolling row of recent canvas events for low-noise live activity.
4 storiesCandlestick Chart
OHLC financial chart for session-by-session price action.
3 storiesComparison
Side-by-side comparison layout for content or features.
2 storiesCountdown Timer
Countdown and SLA timer for deadlines, escalations, and response windows.
2 storiesData List
Semantic key-value metadata layout for displaying labels with values.
2 storiesData Table
Enhanced data table with sorting, filtering, selection, and pagination controls.
1 storyFlow Diagram
Interactive flow diagram with nodes, edges, and controls.
1 storyGantt Chart
Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.
4 storiesHeat Overlay
Heatmap-style overlay drawing soft radial blobs for canvas activity samples.
4 storiesLine Chart
Renders a line chart for data visualization.
Live Feed
Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.
2 storiesMarket Treemap
Sector-style market heatmap using weighted tiles and signed performance colors.
2 storiesMetric Cluster
Compact stack of related metrics pinned to a canvas object's corner.
4 storiesMetric Gauge
Real-time arc and dial display for monitored percentages and utilization.
2 storiesMini Map Panel
Viewport overview panel showing canvas bounds, markers, and the current zoom window.
1 storyOrder Book
Level II bid/ask depth ladder with cumulative size bars and spread readout.
3 storiesPresence Stack
Overlapping live-presence avatars with status dots and a sane overflow chip.
4 storiesPresence Sync Indicator
Compact pill that surfaces live connection + sync health for a collaborative canvas.
4 storiesProgress Bar
Visual progress indicator with labels and completion state.
1 storyProgress Card
Card displaying progress metrics and status.
1 storyRun Timeline
Multi-lane execution timeline showing run phases over time, with optional cursor.
4 storiesSeverity Badge
Operational severity label with tone variants and optional pulse for critical incidents.
5 storiesSparkline Grid
KPI grid of labeled value tiles each paired with a compact sparkline trend.
2 storiesStat Card
Headline KPI card for metrics, trends, and supporting context.
2 storiesStatus Board
Service health grid for surfacing infrastructure state, queue pressure, and incidents.
3 storiesStatus Indicator
Compact status label with tone, variant, and activity dot options.
2 storiesSticky Metric
Pinned metric pill that sticks to a canvas object's corner.
4 storiesTable
Styled data table with header, body, and footer sections.
1 storyThreshold Ring
Compact ring gauge expressing how close a value is to a threshold.
4 storiesTicker Tape
Marquee-style scrolling symbol tape with price and change badges.
2 storiesUsage Breakdown
Ranked resource consumption list with relative share and trend cues.
3 storiesWatchlist
Tracked-symbol list with price, change, and advancing/declining summary.
3 storiesWorld Clock Bar
Multi-timezone display for follow-the-sun teams and operational handoffs.
3 storiesContent
Accordion
Collapsible content sections supporting single or multiple open items.
1 storyBlog Card
Card layout for displaying blog post previews.
1 storyCallout
Highlighted content block with variant styles for info, warning, danger, and more.
1 storyCard
Container with header, content, and footer sections.
1 storyCarousel
Scrollable content carousel with navigation controls.
1 storyCode Block
Syntax-highlighted code display with copy support.
1 storyCode Playground
Interactive code editor with live preview.
2 storiesCollapsible
Expandable and collapsible content section.
1 storyContent Intro
Introductory section for content pages with title and description.
2 storiesCredit Badge
Balance status pill for credits, wallet states, and billing health.
2 storiesDocument Sibling Nav
Newer/older navigator: links to the previous and next item in an ordered series.
6 storiesFAQ
Frequently asked questions section with expandable answers.
2 storiesMDX Content
Renders MDX content with component mapping.
1 storyObject Card
Durable object view for agents, runs, artifacts, and tasks inside the canvas.
1 storyObject Inspector
Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.
4 storiesPlan Badge
Subscription tier indicator for pricing, billing, and account summaries.
3 storiesPolicy Delivery Panel
Right-dock panel listing policies / guardrails active for the route or run.
4 storiesProperty Section
Compact key/value grid for inspector panels — labels, sublabels, optional collapse.
4 storiesRelationship Inspector
Right-dock panel listing inbound + outbound edges of the focused canvas object.
4 storiesRole Badge
Account role indicator for owners, admins, members, and billing contacts.
2 storiesRouting Assignment Panel
Right-dock panel listing the agent slots an active route dispatches to.
4 storiesRuntime Overview Panel
Top-of-dock summary tile grid for runtime health when no canvas object is selected.
4 storiesShare Section
Social sharing buttons and link copy section.
2 storiesSlideshow
Step-through slideshow for presenting content sequentially.
2 storiesSubscription Card
Subscription status and management card for plan, renewal, and usage details.
2 storiesTerminal
Terminal-style display for command output.
1 storyTimeline
Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines.
4 storiesTLDR Section
Summary section for quick content overview.
1 storyVideo Embed
Responsive video embed for YouTube and other providers.
1 storyWallet Card
Credit balance display card for available, pending, and refresh details.
2 storiesLearning
AI Chat Input
Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
2 storiesAI Message Bubble
Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
3 storiesAI Source Citation
Compact source reference card for AI answers with a title, origin label, and optional excerpt.
1 storyAI Streaming Text
Readable text block for partial assistant output with an optional live cursor while tokens stream in.
2 storiesAI Tool Call Display
Structured card for tool invocation traces, statuses, serialized input, and returned output.
2 storiesAnnotation
Inline highlight with an attached contextual note.
2 storiesChecklist
Interactive checklist with progress tracking and toggleable items.
2 storiesCompletion Dialog
Dialog displayed upon completing a task or workflow.
2 storiesExercise
Interactive exercise block for learning content.
2 storiesFlashcard
Study card for active recall with prompt and answer states.
1 storyKey Concept
Highlighted definition block for key terms and a glossary list.
2 storiesKeyboard Shortcuts Help
Displays available keyboard shortcuts to the user.
2 storiesLearning Objectives
Lists learning goals for educational content.
2 storiesPro Tip
Highlighted tip block with variants for tips, best practices, gotchas, and more.
1 storyProfile Section
User profile display section with avatar and details.
2 storiesQuiz
Interactive multiple-choice quiz with hints, explanations, and scoring.
2 storiesRating
Inline star rating for lightweight learner feedback.
2 storiesSearch Dialog
Full-screen search dialog with keyboard navigation.
2 storiesStep By Step
Numbered step guide with optional interactive completion tracking.
1 storyStepper
Sequenced steps with complete, current, and upcoming states.
2 storiesThinking Block
Collapsible block showing AI thinking/reasoning with streaming support.
1 storyTour
Guided onboarding flow for introducing content or interface patterns.
1 storyTutorial Card
Card for displaying tutorial previews with metadata.
1 storyTutorial Complete
Completion screen displayed when a tutorial is finished.
2 storiesTutorial Filters
Filter controls for browsing tutorials by category or difficulty.
1 storyTutorial Intro Content
Introduction section for tutorial pages with overview and prerequisites.
1 storyTutorial MDX
MDX renderer tailored for tutorial content with custom components.
1 storyUtility
Alert Pulse
Pulsing ring overlay for alerting canvas objects, with severity tones.
4 storiesAnchor Port
Port marker for object inputs, outputs, and bidirectional links on the canvas.
1 storyAnimated Text
Staggered text reveal for headings, pull quotes, and short supporting copy.
12 storiesAspect Ratio
Constrains content to a specified aspect ratio.
1 storyBorder Beam
Animated accent beam that travels around the border of a highlighted surface.
2 storiesCanvas Shell
Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
1 storyCanvas View
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.
1 storyComment Pin
Anchored discussion pin rendered at canvas coordinates with author + unread badge.
4 storiesConnector Edge
Curved edge between canvas objects with optional inline label state.
1 storyContext Lens
Vignette overlay that dims the canvas outside a circular focus region.
4 storiesFloating Action Button
Fixed-position action button for primary actions.
1 storyGroup Hull
Durable boundary wrapper for related runtime objects sharing context or ownership.
1 storyInfinite Plane
Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.
4 storiesLang Provider
Context provider for language and internationalization.
1 storyLive Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip.
4 storiesMarquee
Continuously scrolling content lane for badges, logos, and status chips.
5 storiesMulti Select Lasso
Selection rectangle overlay for canvas multi-select gestures.
4 storiesNumber Ticker
Animated number transitions for stats, KPIs, and compact numeric callouts.
2 storiesObject Handle
Drag/reposition affordance for spatial objects that need a calm grab target.
1 storyPlayback Ghost
Translucent overlay marking where a canvas object was at a previous timestamp during playback.
4 storiesResizable
Resizable panel layout with draggable handles.
1 storyScroll Area
Custom scrollable area with styled scrollbars.
1 storySelection Presence
Dashed-border overlay marking what another user has selected on the canvas.
4 storiesSpinner
Animated loading spinner indicator.
1 storyState Badge Overlay
State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.
4 storiesTable Of Contents
Auto-generated table of contents from page headings.
2 storiesTable Of Contents Panel
Side panel rendering a table of contents for page navigation.
2 storiesTheme Provider
Context provider for light/dark theme switching.
1 storyTheme Toggle
Button to toggle between light and dark themes.
1 storyThread Bubble
Expanded discussion bubble for an anchored canvas comment thread.
4 storiesDon’t see what you need?
Request a new component and we’ll open a prefilled GitHub issue with the right labels and template.
Request a component