Documentation
Components
Find the right component, try an example, and copy the code. Browse 73 components grouped by what they do.
Search by API name, purpose, or component group.
73 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.
Disclosure
Expandable sections and switchable views.
Forms
Labels, text fields, and choice controls.
- 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. - 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.
- 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. - Sound Input
SoundInputCapture 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 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.
- 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. - AvatarRepresent a person or team with an image or initials.
- Avatar Group
AvatarGroupShow a group of people with overlapping avatars. - 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. - 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.