Component reference

332 components, generated from their types and the shared examples in packages/ui/examples. Guides: getting started · customization · theming · accessibility · SSR & hydration.

Layout #

Arrange things on the page: stacks, grids, containers and page chrome.

Stack · Group · Flex · Grid · Columns · Container · Section · Level · Media · Center & space (Center, Space, Divider) · AspectRatio · ScrollArea · Splitter · Masonry · Reel · Bleed · AppShell · PageHeader · Hero · Footer (Footer, SiteFooter) · Sticky & affix (Sticky, StickyBar, Affix)

Surfaces #

Containers with a visual boundary that group related content.

Card · Box · Panel · Paper & tiles (Paper, Tile, Block, Inset)

Text & icons #

Headings, body text, inline emphasis, formatted values and icons.

Title (Title, Subtitle, Heading) · Text & prose (Text, Prose, Article, Quote) · Anchor · Mark & highlight (Mark, Highlight) · Truncate & leader (Truncate, Leader) · Formatted values (NumberFormatter, RelativeTime, Countdown) · VisuallyHidden · Icon (Icon, IconBadge)

Actions #

Trigger something: buttons and toolbars.

Button (Button, LoadingButton, ConfirmButton, UnstyledButton) · ButtonGroup · SplitButton · Icon buttons (ActionIcon, CloseButton, FloatingActionButton) · Copy & share (CopyButton, CopyId, ShareButton) · Toolbars (CommandBar, FloatingToolbar, BulkBar)

Text input #

Fields the user types a value into.

TextInput · TextArea · Number input (NumberInput, QuantityInput) · Password (PasswordInput, PasswordStrength) · SearchInput · PinInput · TagsInput · InputGroup · InlineEdit · JsonInput · Secret & copy fields (SecretField, CopyField)

Selection #

Choose from options: checkboxes, radios, selects, chips, toggles and sliders.

Checkbox (Checkbox, CheckboxGroup, Checklist) · RadioGroup · Switch · Select (Select, NativeSelect, MultiSelect, Autocomplete) · ChoiceCard · Chips (Chip, ChipGroup) · Segmented & toggle group (Segmented, ToggleGroup) · Sliders (Slider, RangeSlider, AngleSlider) · Rating · TransferList · Preference toggles (ViewToggle, DensityToggle, ThemeToggle, LocaleSwitcher)

Date, time & colour #

Pick dates, times and colours.

Date pickers (DatePicker, DateRangePicker, DateInput, Calendar, MonthPicker, YearPicker) · Time pickers (TimeInput, TimePicker) · Colour (ColorInput, ColorPicker, ColorSwatch)

Files & uploads #

Choose, drop, upload and show files.

File inputs (FileInput, FileButton, Dropzone) · File items (UploadItem, FileCard)

Forms #

Structure a form: labels, help and errors, sections, footers and settings rows.

Form field (FormField, Label) · Form sections (FormSection, FormArea, Fieldset) · FormFooter · Settings rows (SettingsRow, ToggleRow) · DangerZone · WizardNav

Move between pages, sections and steps.

Navbar · Sidebar navigation (SidebarNav, NavLink) · Breadcrumb · Tabs · Steps · Pagination (Pagination, DotPagination, NextPrev, BackLink) · Sub-navigation (Subnav, Iconnav, BottomNav) · Burger · On this page (TableOfContents, ScrollSpy) · Skip link & to top (SkipLink, ToTop)

Overlays #

Content layered above the page: dialogs, drawers, popovers, menus and tooltips.

Modal · ConfirmDialog · Drawer (Drawer, BottomSheet) · Popover & hover card (Popover, HoverCard) · Tooltip · Menu (Menu, ContextMenu) · Spotlight · Lightbox · Overlay

Feedback #

Tell the user what happened: alerts, notifications, banners and empty or error states.

Alert & callout (Alert, Callout) · Notification & toast (Notification, ToastHost) · Message · Banners (Banner, AnnouncementBar, UpgradeBanner) · Consent & offline notices (CookieConsent, OfflineNotice) · Empty & error states (EmptyState, NoResults, ErrorState)

Progress & loading #

Show that work is in progress, or load more.

Spinner · Progress (Progress, SteppedProgress, RingProgress, SemiCircleProgress) · NavigationProgress · LoadingOverlay · Skeleton (Skeleton, SkeletonText, SkeletonCard) · Load more (LoadMore, InfiniteScroll)

Badges & status #

Label and mark state: badges, tags, status dots and live indicators.

Badge · Tag · Status dot & indicator (StatusDot, Indicator) · Live & unread badges (LiveBadge, UnreadBadge) · Semantic badges (EnvBadge, VersionTag, RoleBadge, PriorityBadge, SeverityBadge) · Save & sync status (SyncStatus, AutosaveIndicator, LastSaved) · TypingIndicator

Data display #

Present records: tables, lists, trees, boards, and disclosure of detail.

Table (Table, DataTable) · Description list (DescriptionList, PropertyList) · List (List, ListGroup) · Timeline · Tree · SortableList · KanbanBoard · Accordion & disclosure (Accordion, Collapse, Spoiler, Details) · Filtering (FilterBar, FilterChip, ResultCount)

Charts & metrics #

Numbers and their shape: stats, trends, small charts, meters and gauges.

Stats (Stat, StatCard, Metric, Trend, CountUp) · Sparklines (Sparkline, SparkBar) · BarList · DonutChart · Heatmap · Meters & gauges (Meter, Gauge, UsageMeter, StorageBar) · UptimeBar

Media #

Images, video, galleries and device frames.

Image (Image, Figure, BackgroundImage) · VideoFrame · Galleries (Carousel, Thumbnav, GalleryGrid) · BeforeAfter · Logo cloud & marquee (LogoCloud, Marquee) · Device frames (BrowserFrame, PhoneFrame)

Users, accounts and conversations: avatars, profiles, comments and reactions.

Avatar (Avatar, AvatarGroup, PresenceAvatar) · Account switchers (UserButton, OrgSwitcher) · Profiles & members (ProfileHeader, MemberRow, InviteCard) · Comments & chat (Comment, ChatBubble, Mention, ReactionBar) · Activity & inbox (ActivityItem, InboxItem) · Testimonials & reviews (Testimonial, ReviewCard) · SocialLinks

Code & developer #

Code, keyboard shortcuts, logs, JSON, APIs and delivery pipelines.

Code (Code, CodeBlock, Diff) · Keyboard (Kbd, Hotkey) · Terminal & logs (Terminal, LogViewer) · JSON (JsonViewer, JsonTree) · FileTree · API endpoints (EndpointRow, HttpMethodBadge) · Builds & git (Pipeline, BuildStatus, CommitChip, BranchBadge) · Status & changelog (ServiceStatus, ChangelogItem)

Commerce & billing #

Products, carts, prices, plans and invoices.

Product & price (ProductCard, Price) · Cart (CartLine, OrderSummary) · Plans (PricingCard, FeatureList, FeatureCompare) · Billing (CreditCardPreview, InvoiceRow)

Documentation #

Build documentation pages like these.

Documentation pages (DocPage, DocExample, DocMenu)