Components
Find, preview, and use React components connected by one token system.
Every component. One place.
380 documented components across 14 groups. Every entry opens a live, token-driven example with usage guidance.
380 components to explore
Core interface
The essential controls and surfaces used across every product.
Animated Charts
Explore line, area, bar, and pie charts with tooltips, legends, and an adjustable data range.
Avatar
Represent a person with an image or readable initials.
BentoGrid
Arrange bordered cells in a responsive grid with independent column counts at each breakpoint.
Button
A polymorphic button with token-driven variants, sizes, and states. Supports asChild via Radix Slot for polymorphism.
ButtonGroup
Group related actions with consistent alignment and spacing.
Card
A composable card with header, content, and footer slots. Reads radius, shadow, and surface color from your token file.
H1
Apply the heading scale and typography from the active preset.
Item
Arrange an item's label, description, and supporting content.
SplitButton
Pair a primary action with a menu of related actions.
Stepper
Show the current step in a multi-step process.
Toast
A non-intrusive notification popup with auto-dismiss, action buttons, and swipe-to-dismiss. Built on Radix Toast.
Tooltip
A brief text label that appears on hover or focus. Built on Radix Tooltip with token-driven delay, offset, and styling.
TooltipProvider
Coordinate concise tooltips across nearby triggers.
Forms & input
Fields, selection controls, upload flows, and structured data entry.
AsyncSelect
Load selectable options from an asynchronous source.
Autocomplete
Suggest matching options as the user types.
AvatarUpload
Choose an image to use as an avatar.
Calendar
A token-driven calendar built on react-day-picker with single, range, and dropdown navigation modes.
Checkbox
Toggle an independent option, with support for mixed and disabled states.
CheckboxCard
Present a selectable option inside a labeled card.
CheckboxGroup
A multi-select checkbox group with shared state, sub-labels, and disabled support.
ColorField
Pair a color input with a readable label.
ColorPicker
Choose a color with a visual picker and editable value.
Combobox
Search a list of options and select a value.
ComboboxField
Pair a searchable select with a label and supporting text.
CreatableSelect
Choose an existing option or create a new one.
CurrencyInput
Enter a monetary value with currency context.
DatePicker
Choose a date from a calendar popover.
DateRangeField
Choose the start and end of a date range.
DateTimePicker
Choose a date and time in a combined control.
DualRangeSlider
Adjust the lower and upper bounds of a range.
Editable
Switch a displayed value into an inline editor.
Field
A form field wrapper that connects a label, input, description, and error message with accessible aria attributes.
FileDropzone
Select files or drag them into a dedicated drop area.
FileUpload
Select files and show the current upload selection.
Form
A form container with built-in validation, submission handling, and field-level error state propagation.
ImageUpload
Choose an image and preview the selected file.
Input
A styled text input that reads border, radius, and focus tokens from your token file.
InputGroup
Combine an input with labels, icons, or adjacent actions.
InputOTP
Enter a one-time code in individual character slots.
Label
Associate a readable label with a form control.
MultiSelect
Select several values from a set of options.
NativeSelect
Choose an option with the browser's native select control.
NumberField
Edit a numeric value with increment and decrement controls.
PasswordInput
Enter a password with a visibility toggle.
PhoneInput
Enter a phone number in a labeled form control.
RadioCard
Select one option from a set of labeled cards.
RadioGroup
Select one option from a related group.
RangeSlider
Choose a numeric value along a bounded range.
RatingGroup
Choose a rating from a set of visual values.
SearchInput
Enter a search query with a clear action.
SegmentedControl
Choose one value from a compact row of options.
SegmentedTabs
Switch panels from a compact segmented tab list.
Select
Choose an option from an accessible popover list.
ShortcutRecorder
Capture a keyboard shortcut from user input.
SignaturePad
Draw a signature and clear or export the result.
Slider
Adjust a numeric value along a draggable track.
SliderField
Pair a slider with a readable label and value.
StepperField
Edit a bounded number with increment and decrement buttons.
Switch
Turn a setting on or off.
SwitchField
Pair an on/off setting with its label and description.
TagsField
Pair a tag input with a label and supporting text.
TagsInput
Add and remove values in a tag-based input.
Textarea
Enter longer text in a multiline form control.
TimePicker
Choose a time using a labeled input control.
Toggle
Switch a single action between pressed and unpressed states.
ToggleGroup
Group related toggle buttons with shared selection behavior.
Feedback & status
System state, progress, loading, notifications, and user feedback.
Alert
Display a status message with a title and supporting detail.
Badge
Add a compact label for a category, count, or state.
BannerAlert
Display a prominent status message across a content region.
BrailleSpinner
Indicate ongoing work with an animated text-based spinner.
Callout
Highlight supporting information within a document.
CircularProgress
Show progress as a circular indicator.
Empty
Explain an empty state and guide the user toward a next step.
ErrorState
Explain a failed operation and provide a recovery action.
InlineAlert
Show feedback alongside the content it concerns.
LoadingSpinner
An animated loading indicator using token-driven colors, sizes, and durations. SVG-based with reduced-motion support.
LoadingState
Explain that content is loading and reserve its place.
Notification
Present a notification with its message and context.
NotificationList
Group notifications with their context and status.
OnlineIndicator
Mark whether a person or service is online.
PresenceAvatar
Pair an avatar with a presence indicator.
Progress
Show completion as a horizontal progress indicator.
ProgressSteps
Show completion across a series of steps.
Skeleton
Reserve a content shape while data is loading.
SkeletonCard
Reserve a card layout while its content loads.
SkeletonTable
Reserve table rows while records are loading.
SpinnerOverlay
Indicate loading over an existing content region.
StatusBadge
Display a labeled status with a matching visual indicator.
StatusDot
Represent a status with a compact colored indicator.
StatusPill
Display a status in a compact rounded label.
SuccessState
Confirm a successful outcome and provide a next step.
TimelineProgress
Show progress alongside its milestone context.
ToastAction
Render an action button suitable for a notification.
ToastPromise
Show loading, success, and error notifications for a promise.
Data display
Tables, metrics, charts, lists, and dense information surfaces.
BulkActions
Offer actions for a set of selected records.
Carousel
An accessible Embla-powered slider with keyboard support, optional 3D tilt, and dot pagination.
Chart
Build responsive Recharts visualizations with token-styled axes, tooltips, and legends.
ChartContainer
Build responsive Recharts visualizations with token-styled axes, tooltips, and legends.
ColumnVisibility
Choose which table columns are visible.
DataFilters
Choose filters for a collection of records.
DataGrid
Display records in a structured data grid.
DataList
Present records as a structured list.
DataListItem
Arrange one record inside a structured list.
DataPagination
Navigate record pages and show the current range.
DataTable
A token-driven data table with custom cell renderers, click handling, and empty states.
DataToolbar
Group search, filtering, and actions for a dataset.
DescriptionList
Associate terms with their descriptions using semantic markup.
EmptyTable
Explain why a table has no results.
KeyValue
Display a label and its associated value.
KPI
Display a key metric with a label and change indicator.
Listbox
Choose an item from an accessible option list.
Meter
Show a measured value within a known range.
MetricGrid
Arrange related metrics in a responsive grid.
PropertyList
Present labeled properties in a consistent list.
SparkArea
Show a compact trend with a filled area.
SparkBar
Compare a short series of values with compact bars.
StatCard
Display a statistic with its label and supporting context.
Table
Compose semantic tables with styled headers, rows, and cells.
TreeTable
Display hierarchical records in a table.
TreeView
Browse hierarchical items with expandable branches.
Trend
Show the direction and size of a change.
VirtualList
Render a window into a long list of items.
Layout & structure
Token-aligned containers, grids, rails, spacing, and page shells.
Accordion
Expand and collapse related sections with keyboard-accessible triggers.
AppShell
Arrange application navigation, a sidebar, and the main workspace.
Aside
Place supporting content alongside the main reading area.
AspectRatio
Keep media at a consistent width-to-height ratio.
Banner
Display a full-width message within the page layout.
Box
Apply token-based spacing and surfaces to a layout container.
Center
Center content within the available layout space.
Collapsible
Reveal optional content from an accessible trigger.
Container
Constrain content to a consistent, responsive reading width.
Divider
Separate regions with a token-aligned structural band.
Flex
Arrange children with token-based flex alignment and gaps.
Frame
Enclose content within a structural page frame.
Gutter
Reserve a consistent gap between structural regions.
Hairline
A free-flow rule for editorial and hairline rhythm pages.
Header
Group the introductory content of a page or section.
HRule
Separate adjacent content with a horizontal rule.
LayoutControls
Expose controls for adjusting a layout demonstration.
Main
Mark and arrange the primary content of a page.
Margin
Apply consistent outer space to a content region.
PageGrid
Align page content to a shared column grid.
PageShell
Top-level `<main>` wrapper that centers content with token-driven max-width. Use `inset` for full-bleed tool layouts inside an AppShell.
Panel
Group related content on a token-styled surface.
ResizablePanel
Resizable panel layouts with drag handles. Create split panes for editors, file browsers, and dashboards.
ResizablePanelGroup
Arrange panels with draggable resize handles.
Rhythm Modes
Choose between locked full-cell structural layout and free-flow hairline composition.
ScrollArea
Contain overflowing content with a styled scrollbar.
Section
Group related content with token-based spacing.
SectionDivider
Separate page sections with a structural band.
Separator
Create a horizontal or vertical separator between items.
SigilFrame
A structural-visibility frame that displays the underlying token grid — cross marks, rail lines, and measurement labels — around its children.
SigilFullBleed
A layout primitive that breaks out of the content column to span the full viewport width while maintaining the structural grid.
SigilGrid
Grid with visible cross marks at cell intersections. Uses a pseudo-element background to render the sigil pattern.
SigilGutter
Render the margin rails of a structural page grid.
SigilNavbar
Align navigation to Sigil's structural page rails.
SigilPageGrid
A page-level 12-column grid with structural-visibility rail lines, cross marks at intersections, and gutter patterns.
SigilSection
Compose a page band with consistent token-based spacing.
SigilViewCode
Toggle between a live demo and the source code that produced it.
SimpleGrid
Arrange equal-width items in a responsive grid.
Spacer
Insert token-based space between layout elements.
Stack
Arrange children vertically or horizontally with consistent gaps.
Structural Grid Rhythm
How Sigil keeps sections, dividers, rails, and gutter ruler patterns phase-locked to full grid-cell intervals.
Tabs
Switch between related panels with keyboard-accessible tabs.
VoronoiBento
Arrange content in a geometric, irregular grid.
Overlays
Dialogs, menus, sheets, popovers, tours, and transient surfaces.
ActionMenu
Open a list of actions from a compact trigger.
AlertDialog
Ask for confirmation before an action that needs extra care.
Coachmark
Explain a nearby control with a contextual hint.
Command
Build a searchable command list with keyboard navigation.
CommandMenu
Search commands, navigate with the keyboard, and run an action.
ConfirmDialog
Require an explicit confirmation or cancellation.
ContextMenu
Open contextual actions with a right-click or keyboard shortcut.
ContextPanel
Display details and actions related to the current selection.
Dialog
Present focused content in an accessible modal dialog.
Drawer
Reveal supporting content in a dismissible edge panel.
DropdownMenu
Group contextual actions in a keyboard-accessible menu.
FloatingPanel
Display supporting controls on an elevated panel.
HoverCard
Reveal supplementary content on hover or keyboard focus.
ImagePreview
Open an image from a clickable thumbnail.
Lightbox
Open media in a focused, dismissible overlay.
Modal
Open a titled dialog from a supplied trigger.
OverflowMenu
Move secondary actions into a compact menu.
Popover
Show contextual content in an anchored floating panel.
PopoverForm
Place a short form in an anchored popover.
PreviewCard
Reveal a link's context on hover or keyboard focus.
PromptDialog
Collect a short answer in a focused dialog.
ResponsiveDialog
Adapt dialog content to the available screen space.
Sheet
Open an accessible panel from an edge of the screen.
Sonner
Display token-styled notifications using Sonner's toast API.
Spotlight
Find and select commands in a focused search dialog.
Toaster
Render dismissible notifications sent through Sigil's toast function.
TooltipGroup
Coordinate tooltips for a related group of controls.
Tour
Guide users through a sequence of interface targets.
TourStep
Explain one target in a guided product tour.
Developer & productivity
Code, commands, shortcuts, tokens, and collaborative workflows.
Accessible Icon
Makes decorative icons accessible by providing a visually hidden label.
ActivityTimeline
Show recorded activity in chronological order.
AuditLog
List recorded actions and the people who performed them.
Changelog
List product updates with release information.
ChatMessage
Display a message with author and timestamp context.
ChatThread
Arrange a sequence of conversation messages.
Clipboard
Copy a value and provide feedback when copying succeeds or fails.
CodeBlock
Display formatted source code with syntax highlighting.
CodePreview
Display a source-code example in a styled panel.
CodeTabs
Switch between related code examples in a tabbed panel.
CopyButton
Copy supplied text and announce the result.
CopyInput
Display a value with a copy button and clear feedback.
Direction
RTL/LTR context provider and hook for bidirectional layout support.
HotkeyProvider
Register keyboard shortcuts within a shared context.
Kbd
Display a keyboard key or shortcut in a compact label.
KeyboardKey
Show the label of a keyboard key.
MessageComposer
Write a message and submit it with a send action.
PromptInput
Compose a prompt in a multiline input.
SigilCursor
Apply the active preset's custom pointer treatment.
Terminal
Display command-line input and output in a terminal panel.
ThemeSwatch
Preview a theme's palette in a selectable swatch.
ThemeSwitcher
Choose a visual theme from the available options.
TokenPreview
Show the current value of a design token.
Typography
Semantic text primitives — headings, paragraphs, and inline elements — driven entirely by token variables.
VersionBadge
Display a release or version identifier.
Visually Hidden
Hides content visually while keeping it accessible to screen readers.
Marketing
Product storytelling, pricing, social proof, and conversion blocks.
AnnouncementBar
Place a short announcement and link above your navigation.
BlogGrid
Present articles in a responsive grid of summaries.
BlogHeader
Introduce an article with its title, metadata, and description.
CostCalculator
Estimate costs from adjustable usage inputs.
CTA
Pair a focused message with a clear next action.
FeatureCard
Present a capability with its title and description.
FeatureFrame
Frame a feature illustration with supporting text.
FeatureGrid
Arrange product features in a responsive grid.
Hero
Introduce a page with a headline, description, and actions.
LogoBar
Arrange brand marks in a compact horizontal row.
Pricing
Present pricing options with their features and actions.
PricingCard
Present a plan's price, features, and action.
PricingTiers
Arrange pricing plans in a tiered comparison.
TestimonialCard
Present a quotation with its author and context.
TestimonialCarousel
Browse a sequence of customer quotations.
UnitPricing
Explain a price that scales with measured usage.
Page sections
Complete, responsive page bands composed from the component system.
BentoSection
Arrange related content in a responsive grid of varied cells.
BlueprintGridSection
Blueprint-style 2-column feature grid inspired by Dedalus' BlueprintFeatures. Each card scroll-reveals with staggered delay; contains a diagram viewport, spec table, and callout chips.
CodeShowcaseSection
Pair a code example with supporting product context.
ComparisonSection
Compare options in a structured page section.
CTASection
Close a page section with a message and action links.
FAQSection
Answer common questions in expandable sections.
FeatureFrameSection
Present a feature in a structured, illustrated page section.
FeatureSection
Introduce a product capability with text and visual content.
FeatureShowcaseSection
Combine feature descriptions with a larger visual demonstration.
FooterSection
Add a complete footer band to a composed page.
GradientBannerSection
Highlight a message on a token-colored gradient band.
HeroSection
Compose a complete introductory section with visual content.
InstallSection
Present installation commands and setup guidance.
LargeTextSection
Give a short statement a prominent place in the page.
LogoCloudSection
Present supporting brands in a responsive logo section.
NewsletterSection
Invite readers to subscribe with an email form.
SectionHeading
Pair a section title with supporting text.
StatsSection
Present a group of metrics with labels and context.
TeamSection
Introduce team members and their roles.
TestimonialsSection
Group customer quotations in a page section.
TimelineSection
Present milestones in a complete page section.
Diagrams & charts
Technical explanations, data visualization, and system maps.
ActivityFeed
Show recent events in a compact, chronological feed.
ArchitectureDiagram
Isometric architecture diagram combining exploded-view layering with cross-hatching for infrastructure layers.
AreaChart
Compare changes over time with filled data series.
BarChart
Compare values across categories with labeled bars.
BeforeAfterDiagram
Show the difference between two versions side by side.
BillingChart
Visualize billing totals and their changes over time.
CapabilityGrid
Explain a set of capabilities in a structured diagram grid.
ChangelogTable
List releases and changes in a compact table.
CommitGrid
Show daily activity as a calendar heatmap.
ComparisonTable
Compare features across products or plans in a table.
CrossHatch
Fill a region with a repeating crosshatch pattern.
DependencyGraph
Map dependencies between connected nodes.
Diagram
Provide a shared canvas for token-styled diagrams.
DiagramCalloutLine
Connect an annotation to a specific point in a diagram.
DiagramConnector
Link diagram elements with a styled connector.
DiagramLabel
Label a diagram element with consistent typography.
DiagramNode
Represent an item or step inside a diagram.
DonutChart
Show how categories contribute to a total.
EcosystemDiagram
Map relationships between a product and its integrations.
ExplodedView
Reveal the layers that make up an object or interface.
FeatureMiniDiagram
Illustrate a feature in a compact diagram.
FlowDiagram
Explain a process with connected steps.
FunnelChart
Show how values narrow through successive stages.
GanttChart
Plot tasks and their durations along a timeline.
GlobeDiagram
Illustrate geographic connections on a globe.
HeatmapGrid
Map values to color intensity across a grid.
HubRouteDiagram
Connect multiple routes through a central hub.
HubSpokeDiagram
Show relationships around a central node.
IsolationStack
Illustrate boundaries between stacked system layers.
IsometricStackDiagram
Explain layered architecture with an isometric stack.
LeaderboardTable
Rank entries by a score or measured value.
LineChart
Plot one or more data series over a shared axis.
MatrixDiagram
Compare relationships across a two-dimensional matrix.
MermaidDiagram
Render a diagram from Mermaid text syntax.
MetricCard
Pair a key value with its label and supporting context.
MiniBarList
Compare a short list of values with compact bars.
NetworkGraph
Visualize a network of nodes and connections.
OrbitDiagram
Arrange related objects around a central element.
PieChart
Compare category shares as segments of a circle.
PipelineDiagram
Show the stages in a processing pipeline.
PlatformHubDiagram
Connect platform capabilities around a central hub.
PricingTable
Compare plan prices and included features.
ProgressRing
Display a completion value around a circular track.
RadarChart
Compare multiple dimensions on radial axes.
SankeyDiagram
Show flows and their relative sizes between stages.
SparkLine
Show a compact trend without full chart axes.
SpecTable
Present technical specifications as labeled values.
StackDiagram
Illustrate the layers of a system.
StatePersistence
Preserve a value across reloads using browser storage.
StatusTable
Summarize the state of several services or resources.
StreamFlowDiagram
Visualize data moving through a connected stream.
Timeline
Arrange events along a chronological line.
TreeDiagram
Show hierarchical relationships as a branching diagram.
UsageGauge
Show current usage relative to a limit.
VennDiagram
Illustrate overlap between related sets.
WaterfallChart
Show how successive changes contribute to a final total.
Shapes & patterns
Token-driven geometry, texture, and structural decoration.
Cross
Draw a token-styled cross mark for structural decoration.
Diagonal
Draw diagonal line patterns within a surface.
Diamond
Render a diamond shape using the active design tokens.
GrainGradient
Add a textured gradient surface behind content.
Hexagon
Render a hexagonal shape using the active design tokens.
Pattern
Apply a repeating, token-driven background pattern.
Shape
Render token-styled geometric decoration.
Tessellation
Fill a surface with repeating geometric tiles.
Triangle
Render a triangular shape using the active design tokens.
3D & spatial
Isometric scenes, dimensional cards, and spatial interface objects.
Box3D
A CSS 3D box with six faces, configurable dimensions, and GSAP-powered rotation. No WebGL required.
Box3DGrid
Arrange dimensional boxes into a coordinated grid.
Card3D
A card with perspective tilt that follows the cursor. GSAP-powered with configurable depth, glare, and spring physics.
ExplodedBox3D
Separate a dimensional box into visible layers.
FloatingUI
Arrange interface panels in a layered visual composition.
IsometricCylinder
Render a cylinder in an isometric scene.
IsometricPrism
Render a prism with token-styled faces.
IsometricScene
Compose objects within a shared isometric perspective.
IsometricView
Apply a consistent isometric perspective to content.
Motion & effects
Purposeful transitions, reveals, scroll behavior, and visual effects.
AnimateOnMount
Wrapper that plays a CSS transition on mount (no scroll trigger). Lighter alternative to the GSAP-based AnimateOnScroll for simple mount reveals.
AnimateOnScroll
Reveal content as it enters the viewport.
BlurFade
Reveal content with a short blur and fade transition.
FadeIn
Reveal content with an opacity transition.
GradientText
Apply a token-colored gradient to text.
LetterPullUp
Reveal text with a staggered upward letter animation.
Marquee
Move a repeating content strip across its container.
NumberTicker
Animate a number as it changes to a target value.
ParallaxLayer
Move a layer in response to scrolling.
ProximityGlow
Pointer-proximity glow border using CSS mask-composite and conic-gradient angle tracking.
Pulse
Draw attention to a status with a repeating pulse.
Ripple
Provide expanding visual feedback around an interaction.
ScaleIn
Reveal content with a restrained scale transition.
ScrollProgress
Indicate how far the user has scrolled through content.
SlideIn
Reveal content from a selected direction.
Stagger
Sequence the entrance of a group of elements.
TextReveal
Reveal a passage of text progressively.
TypeWriter
Typewriter text effect with blinking cursor. Types, pauses, deletes, and loops through multiple strings.
useInView
Lightweight IntersectionObserver hook. Returns a ref and visibility boolean for scroll-triggered animations.
useReducedMotion
Returns true when the user prefers reduced motion. All animation components use this hook internally.
WordRotate
Cycle through a set of words in a shared text position.