Documentation
Components
Find the right component, try an example, and copy the code. Browse 93 components grouped by what they do.
Search by API name, purpose, or component group.
93 components found.
General
Buttons, links, labels, and text.
- ButtonRun an action, such as saving a form or opening a dialog.
- Icon Button
IconButtonShow an action as an icon when space is limited. - Button Group
ButtonGroupKeep related buttons together in a row or column. - Dropdown Button
DropdownButtonOpen a menu of related actions from a button. - Reveal Button
RevealButtonShow an icon that reveals its label on hover or keyboard focus. - BadgeShow a short status, label, or count.
- LinkTake users to another page or a section on the same page.
- TypographyStyle headings and body text with consistent sizes, weights, and colors.
Layout
Spacing, alignment, grids, and dividers.
- BoxWrap content with spacing, a background, a border, or rounded corners.
- ContainerCenter page content and limit its width.
- StackArrange content in a row or column with even spacing.
- FlexArrange items with control over alignment, wrapping, and available space.
- GridArrange content in rows and columns.
- SeparatorAdd a horizontal or vertical line between sections.
- Resizable PanelsCompose, resize, focus and restore useful workspaces.
Disclosure
Expandable sections and switchable views.
Forms
Labels, text fields, and choice controls.
- InspectorEdit the current selection in a compact, sectioned property panel.
- Form Field
FormFieldConnect a form control to its label, help text, and error message. - InputCollect a single line of text, such as a name or email address.
- TextareaCollect several lines of text, such as a message or description.
- Number Input
NumberInputCollect a number with optional minimum, maximum, and step values. - SliderChoose a value, range, or labelled milestone with an accessible slider.
- CheckboxLet users turn individual options on or off.
- Radio Group
RadioGroupLet users choose one option from a visible list. - SelectLet users choose one option from a dropdown list.
- ComboboxLet users search a list and choose an option.
- SwitchTurn a setting on or off.
Advanced Inputs
Searchable lists, tags, dates, and audio input.
- File Upload
FileUploadStage files in a compact queue with clear limits and recoverable uploads. - Async Select
AsyncSelectLet users choose from options loaded by your app, with loading and retry states. - Multi Select
MultiSelectLet users search for and choose several options. - Tag Input
TagInputLet users add, edit, and remove text tags. - Voice Input
VoiceInputCapture microphone audio and show its input level. - Date Picker
DatePickerLet users type a date or choose one from a calendar. - Date Range Picker
DateRangePickerLet users choose a start date and an end date. - Date & Time Picker
DateTimePickerLet users choose a date and time.
Feedback
Loading indicators, status messages, and notifications.
Overlays
Dialogs, menus, tooltips, and panels.
- DialogOpen a focused window above the page for a task or confirmation.
- PopoverShow extra content next to a button or other trigger.
- TooltipShow a short hint when users hover over or focus a control.
- Dropdown Menu
DropdownMenuShow a menu of actions when users open a trigger. - DrawerOpen a panel from the edge of the screen.
Navigation
Menus and controls for moving around an app.
- BreadcrumbShow where the current page sits in the site hierarchy.
- Command Palette
CommandPaletteLet users search for actions and pages from one place. - Navigation Menu
NavigationMenuGroup page links in a menu with optional dropdown panels. - NavDockShow navigation links in a compact icon dock.
- PaginationLet users move between pages of results.
- SidebarOrganize app navigation in a sidebar that can collapse.
- Sidebar Activity
SidebarActivityKeep background work, progress, and attention items visible in a sidebar. - Bottom Bar
BottomBarCompose a collapsible bottom work panel with custom content and sizing. - Sidebar Shell
SidebarShellArrange a sidebar, header, main content, and footer into an app layout. - StepsShow the current step and progress through a task.
Data Display
Structured content, records, tables, cards, and timelines.
- Filter Bar
FilterBarFilter a list with editable chips like "Status is any of Open, Blocked", built on one JSON filter model. - Query Input
QueryInputType a filter like status:open created:>-7d with autocomplete, token colors and exact error ranges, in sync with FilterBar chips. - Saved views & URL stateKeep filters in a readable, versioned URL and save them as named views with an edited marker and one-step undo.
- Filter Assistant
FilterAssistantAsk for a filter in words, then accept or reject each proposed chip before anything changes. - Kanban Board
KanbanBoardMove cards between stages with drag, keyboard, or a menu, with WIP limits and optimistic saves. - CalendarLet users choose a date or date range from a month view.
- CardGroup related content and actions in a single panel.
- CarouselLet users browse a series of cards or images.
- Card Scroller
CardScrollerLet users scroll through and select cards in a row. - Card Stack
CardStackLet users browse cards arranged in a stack or fan. - Card Stack Animated
CardStackAnimatedDirectional card decks with optional touch navigation. - AvatarRepresent a person or team with an image or initials.
- Avatar Group
AvatarGroupShow a group of people with overlapping avatars. - Delta Badge
DeltaBadgeShow a signed change with an icon, colored by whether the change is good for the metric. - Bar List
BarListRank categories with horizontal bars, aligned values, links, and a show-more limit. - Line Chart
LineChartPlot trends on one axis with a crosshair tooltip, keyboard readout, legend filtering and a table view. - Area Chart
AreaChartShow volume over time as overlapping or stacked areas with a crosshair tooltip, keyboard readout and table view. - Bar Chart
BarChartCompare categories or periods with grouped or stacked bars, per-bar hover, a keyboard readout and a table view. - Data Table
DataTableDisplay rows of data with sorting, filtering, selection, and pagination. - Slot Planner
SlotPlannerManage available time slots and let users request bookings in their time zone. - Stat Tile
StatTileLead with a KPI: headline value, change indicator and inline trend, grouped into a responsive row. - SparklineShow a compact trend inline as a line, gradient area, or bars in the chart palette.
- TableDisplay data in rows and columns.
- TimelineShow events in order with statuses and optional selection.
AI / Chat
Messages, prompts, and conversation tools.
Effects
Animated backgrounds and decorative motion for landing pages and heroes.
- Liquid Mesh Background
LiquidMeshBackgroundSoft pools of color drift and blend behind your content. - Silk Flow Background
SilkFlowBackgroundSatin folds flow across the surface with gentle directional lighting. - Caustic Light Background
CausticLightBackgroundMoving water-like ridges cast a field of caustic light. - Contour Field Background
ContourFieldBackgroundTopographic contours evolve through a warped noise field. - Orbital Glow Background
OrbitalGlowBackgroundLuminous elliptical rings surround a soft, slowly shifting core. - Hero Text Animation
HeroTextAnimationReveal a headline one word or line at a time. - Shader Hero Text
ShaderHeroTextSix WebGL headline effects, including particle lettering that follows your mouse and reforms. - Grid Beams Background
GridBeamsBackgroundAdd moving light beams to a subtle grid background. - Magnetic Beams Background
MagneticBeamsBackgroundAdd grid beams that follow the pointer. - Aurora Background
AuroraBackgroundAdd soft, flowing bands of color behind your content. - Scan Grid Background
ScanGridBackgroundMove a highlight across a grid background. - Dot Matrix Background
DotMatrixBackgroundAdd gentle pulses of light to a dot grid. - Light Streaks Background
LightStreaksBackgroundAdd moving diagonal streaks of light behind your content. - Starfield Background
StarfieldBackgroundAdd a drifting star background with optional pointer movement.