Components
Explore all 309 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 storyCookie Consent
Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance.
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 storiesGrid
Responsive CSS grid layout primitive with breakpoint column and gap props.
2 storiesInput
Text input field for forms.
1 storyKbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
6 storiesLabel
Accessible form label that associates descriptive text with an input control.
1 storyLink
Styled anchor with emphasis variants and an external-link affordance.
4 storiesMeter
Static measurement bar (role=meter) for a known range, with optional segments.
3 storiesPanel
Bordered, titled content surface with header, body, and footer slots.
2 storiesQR Code
Renders a QR code from a string value as a theme-aware SVG.
3 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 storySwitch
Toggle switch control for binary on/off state.
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 storyToolbar
Horizontal control group (role=toolbar) with arrow-key roving focus and separators.
2 storiesTypography
Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list.
4 storiesForm
Button Group
Visually connected group of buttons that share borders.
2 storiesCalendar
Date picker calendar for selecting dates.
1 storyCategory Filter
Filterable category selection for content lists.
1 storyCheckbox Group
Group of related checkboxes backed by an array of selected values.
3 storiesColor Picker
Popover color picker with swatches, a hue slider, and a hex input.
2 storiesCombobox
Searchable select input for choosing from a list of options.
2 storiesDate Field
Native date input styled to match the design system.
2 storiesDate Picker
Single-date picker built with the shared calendar and popover primitives.
2 storiesDate Range Picker
Popover calendar for selecting a start and end date.
2 storiesField
Layout wrapper pairing a label, control, description, and error message.
3 storiesFieldset
Groups related fields under a shared legend.
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 Group
Groups an input with leading or trailing addons.
3 storiesInput OTP
One-time password input with segmented fields.
1 storyItem
Flexible row layout with leading media, content, and trailing actions.
2 storiesList Box
Accessible single- or multi-select list of options.
2 storiesModel Selector
Dropdown selector for choosing AI models.
1 storyMulti Select
Popover-based multi-selection input with selected-value badges and optional search.
3 storiesNative Select
Styled wrapper around the native select element.
2 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 storyPhone Input
Phone number input with a country dialing-code selector.
2 storiesRange Calendar
Calendar that selects a start and end date as a range.
3 storiesScope Selector
Multi-level scope picker for nested environments, teams, and targets.
2 storiesSearch Bar
Text search input with icon and clear functionality.
1 storySearch Field
Search input with a leading icon and a clear button.
2 storiesSegmented Control
Single-choice segmented selector for switching modes, views, or filters.
3 storiesSelect
Dropdown select input for choosing from a list of options.
1 storyTag Group
Set of tags supporting selection and removal.
2 storiesTags Input
Keyboard-friendly tag editor for adding and removing string values.
3 storiesText Field
Labelled text input bundling description and error message.
3 storiesTime Field
Native time input styled to match the design system.
2 storiesTime Picker
Popover time selector built from hour and minute columns.
2 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 storyAnimated Tooltip
Tooltip that animates in on hover or focus with a scale-and-fade.
2 storiesCommand
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 storyShare Dialog
Modal dialog for sharing a page across social platforms with a copy-link action and overridable labels.
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
Animated Tabs
Tabs with a sliding indicator that animates to the active item.
2 storiesBottom Bar
Slim chrome strip pinned to the bottom of a canvas shell as a calm host for activity strips, status pills, and ambient indicators.
1 storyBreadcrumb
Navigation breadcrumb trail showing the current page hierarchy.
1 storyDock
macOS-style dock whose icons magnify near the pointer.
1 storyFloating Navbar
Floating navigation bar that hides on scroll down and reveals on scroll up.
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 storiesContribution Graph
GitHub-style heatmap of daily activity over time.
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 storiesGauge Chart
Semicircular gauge for a single value within a range.
3 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 storiesOverview Board
Grid of overview cards for at-a-glance dashboards — a row of headline metrics with consistent spacing and tone.
1 storyPie Chart
Proportional pie or donut chart for part-to-whole comparisons.
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 storyRadar Chart
Spider chart comparing several metrics on shared axes.
2 storiesRun Timeline
Multi-lane execution timeline showing run phases over time, with optional cursor.
4 storiesSankey Chart
Flow diagram showing weighted links between nodes.
1 storySeverity 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 storiesData Display
Animated Beam
Animated gradient beam that connects two elements with a flowing light path.
1 storyChoropleth Map
Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.
4 storiesChronological Timeline
Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.
4 storiesFloating Toolbar
Compact action bar that floats above a selection — primary / ghost / destructive variants.
3 storiesFollow Mode
Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.
3 storiesGeography Quiz Map
Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.
3 storiesGlass Progress
Glass-styled progress bar with a translucent track and token-colored fill.
2 storiesGlobe 3D
Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.
3 storiesHandoff Beacon
Attention-routing beacon with pulsing ring and optional source / message card for live canvases.
4 storiesHeat Map Overlay
Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.
5 storiesHistoric Timeline
Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.
4 storiesInteractive Timeline
Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.
4 storiesMap 2D
Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image.
4 storiesMap Timeline
Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.
3 storiesPrimary Source Viewer
Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.
3 storiesRoute Map
Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.
5 storiesScroll Progress
Fixed bar that tracks reading progress down the page.
1 storySelection Halo
Local-user selection halo with corner handles + label slot for spatial canvases.
3 storiesSnap Guides
Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.
3 storiesStory Map
Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom.
3 storiesTree View
Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation.
4 storiesContent
Accordion
Collapsible content sections supporting single or multiple open items.
1 storyAnimated List
List whose items animate in sequentially with a staggered entrance.
1 storyAnimated Testimonials
Testimonial carousel with animated transitions between quotes.
2 storiesBento Grid
Responsive bento-style grid layout with feature cards.
1 storyBlog Card
Card layout for displaying blog post previews.
1 storyBlur Reveal
Reveals content with a blur-to-sharp transition when it scrolls into view.
2 storiesCallout
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 storiesExpandable Cards
Cards that expand on click to reveal additional content.
1 storyFAQ
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 storiesReveal Text
Reveals text with a directional slide-and-fade when it enters the viewport.
3 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 storiesScramble Text
Scrambles characters then resolves them into the final text.
2 storiesShare Section
Social sharing buttons and link copy section.
2 storiesShimmer Text
Text with a bright light band that sweeps across it.
2 storiesSlideshow
Step-through slideshow for presenting content sequentially.
2 storiesSpinning Text
Text laid out in a circle that rotates continuously.
2 storiesSubscription Card
Subscription status and management card for plan, renewal, and usage details.
2 storiesTerminal
Terminal-style display for command output.
1 storyText Animate
Animates text in by word or character with configurable effects.
4 storiesText Reveal
Dims and brightens words as the text scrolls through the viewport.
1 storyText Shimmer
Text with an animated gradient fill that shimmers.
2 storiesTimeline
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 storyTypewriter
Types text out character by character with a blinking cursor.
3 storiesVideo Embed
Responsive video embed for YouTube and other providers.
1 storyWallet Card
Credit balance display card for available, pending, and refresh details.
2 storiesAI
Agent Activity
Visual display of an AI agent's execution chain — steps, tools, decisions, progress.
4 storiesAI Artifact
Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips.
4 storiesAI Sidebar
Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger.
3 storiesChain of Thought
Ordered, status-aware visualization of a model's chain of thought with per-step state.
3 storiesChat Dock Section
Sidebar section that hosts a compact, scrollable chat thread alongside a spatial workspace — slotted into a dock or rail to keep an AI assistant in view.
1 storyModel Comparison
Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar.
4 storiesPrompt Input
Auto-growing prompt textarea with a submit affordance and optional toolbar slot.
4 storiesPrompt Templates
Searchable prompt template gallery with category filter, variable fill-in form, and onSelect.
4 storiesReasoning
Collapsible AI reasoning trace with streaming support and ordered or free-form steps.
3 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 storiesConversation Thread
Compound component family for AI chat UIs that orchestrates auto-scroll, streaming indicators, empty states, and message rendering.
3 storiesCurriculum
Course-layout container for a sequence of lessons or modules with title, progress, optional intro, and a stack of lesson rows.
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 storiesProgress Tracker
Curriculum-level learning dashboard for modules, lessons, exercises, streaks, and earned skills.
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 storyEducational
Civilization Card
Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders.
5 storiesEra Comparison
Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips.
3 storiesHistorical Figure Card
Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section.
5 storiesKnowledge Check
Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary.
3 storiesParallel Timeline
Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history.
4 storiesBilling
Auto Reload
Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency.
5 storiesPricing Table
Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle.
3 storiesTransaction List
Chronological credit/debit history with locale-aware currency formatting and a pinned subscription row.
4 storiesUtility
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 Grid Pattern
Decorative grid background with squares that fade in and out at random.
2 storiesAnimated 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 storyCard Flip
Card that flips in 3D between a front and back face.
2 storiesComment 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 storiesCursor
Custom cursor follower that trails the pointer.
2 storiesDot Pattern
Decorative dotted background pattern built from token colors.
2 storiesFloating Action Button
Fixed-position action button for primary actions.
1 storyGlass Card
Frosted-glass card surface with backdrop blur and a translucent background.
1 storyGlass Panel
Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft border.
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 storyLiquid Glass
Glass surface with an animated liquid gradient sheen.
1 storyLive Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip.
4 storiesMagnetic
Wrapper that pulls its content toward the pointer for a magnetic effect.
2 storiesMagnetic Button
Button that drifts toward the pointer for a magnetic hover effect.
2 storiesMarquee
Continuously scrolling content lane for badges, logos, and status chips.
5 storiesMeteors
Decorative meteor shower of streaks falling across the background.
2 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 storyParticles
Floating particle field that drifts gently in the background.
2 storiesPlayback Ghost
Translucent overlay marking where a canvas object was at a previous timestamp during playback.
4 storiesProgressive Blur
Progressive blur overlay that fades focus toward one edge.
2 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 storiesShimmer Button
Button with a light sheen that sweeps across its surface.
2 storiesShine Border
Wrapper that draws an animated gradient border around its content.
2 storiesShiny Button
Button with a glossy gradient sheen that sweeps on a loop.
1 storySparkles
Decorative twinkling sparkles scattered behind content.
2 storiesSpinner
Animated loading spinner indicator.
1 storySpotlight Card
Card with a radial spotlight that follows the pointer.
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 Preset Provider
Applies the persisted theme preset on mount and injects a no-flash script so the saved preset is set before paint.
1 storyTheme Provider
Context provider for light/dark theme switching.
1 storyTheme Switcher
Compact swatch row for switching between built-in theme presets, kept in sync with every other consumer on the page.
1 storyTheme Toggle
Button to toggle between light and dark themes.
1 storyThread Bubble
Expanded discussion bubble for an anchored canvas comment thread.
4 storiesTilt Card
Card that tilts in 3D toward the pointer for a parallax hover.
1 storyTruncated Text
Single-line text that truncates with an ellipsis when it exceeds a configurable max width.
1 storyDon’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