Components

129 components available across web, iOS and Android.

Stable

Beta

Experimental

Foundations

A profile image with an automatic initials fallback.

A small label for status, counts or categories.

A dot or count pinned to the corner of an avatar, icon or button, such as unread messages or someone’s status.

Renders its children above the app, out of the layout they are written in: for your own floating bars, panels and overlays.

A thin line that divides content horizontally or vertically, with an optional label.

A pulsing placeholder that previews the shape of loading content.

Text, Heading and Kbd components built on the type scale and semantic colors.

Visually Hidden

Text that screen readers read but the screen does not show, such as the rest of a link’s name or what a strikethrough means.

Buttons & Actions

A floating button that appears once the page or a ScrollArea is scrolled down, and scrolls it back to the top.

Triggers an action or event, such as submitting a form or opening a dialog.

Groups related buttons, joined into one control or spaced apart, such as a split button or a set of actions.

A button that copies a value, such as a command, link or key, and confirms it with a check and a "Copied" announcement.

Floating Action Button

The primary action of a screen, such as Compose or New, floating above the content.

A square, icon-only button for compact toolbars and headers.

A button that displays a loading indicator and prevents interaction while an asynchronous action is in progress.

A button that stays on or off, such as Bold in a text toolbar.

A set of toggle buttons: pick one, like text alignment, or turn on several, like bold and italic.

Forms

A text field with suggestions; any text is a valid value.

Lets users select one or more options, or toggle a single setting before submitting.

A labelled set of checkboxes that share one value, the list of checked options, with an optional Select All.

Pick a color by dragging over saturation and brightness, sliding hue and opacity, typing a hex or pressing a swatch, in a field that opens a popover or inline.

A select you can type in to filter long lists of options.

A field that opens a calendar in a popover, or a bottom sheet on phones.

Date Range Picker

A field that opens a range calendar: pick a start, then an end.

Date Time Picker

A date field and time selects side by side that make one Date, for meetings, deliveries and reminders.

A label, a control, help text and an error message, wired together for screen readers. Validation stays with your app or form library.

Lays out a form, with an optional title, description and footer, and wires up submit, loading and disabled states. Field state and validation stay with your app or form library.

A single-line text field, with optional icons, buttons or text inside it and addons joined to it.

An accessible label linked to a form control.

Pick several options from a searchable list; picks show as chips.

A numeric field with − and + buttons, limits and a step.

A one-time-code field drawn as separate slots, with paste and SMS autofill.

A password field with a button that shows and hides the text.

A set of mutually exclusive options where exactly one can be selected.

A row of stars, or any icon, to give a score with a press or the keyboard, or to show one read-only, with half and part-filled icons.

Choose one option from a list — a dropdown on desktop, a bottom sheet on touch devices.

Pick a number, or a range, by dragging a thumb along a track.

An on/off toggle for settings that take effect immediately.

A text field that turns typed or pasted text into removable tags, for free-form values such as topics or email addresses.

A multi-line text field for longer input.

Hour, minute and optional AM/PM selects that produce an "HH:mm" time.

Layout

The frame of an app screen: header, sidebar, main content and footer. It fills the screen, Main scrolls between the bars, and the sidebar becomes a drawer on phones.

Keeps content at a fixed width-to-height ratio as the width changes, for images, video and maps.

Equal-width cells that pick their column count from the available width: as many as fit at a minimum width, with no breakpoints.

Centers page content with a max width and responsive side padding.

Responsive columns with spans and offsets, such as 12-column 8 / 4 layouts, identical on web and native.

A box that scrolls its content within a set height or width. On web its scrollbars are thin and in the theme colors.

A band of a page: a `<section>` with vertical spacing, a surface and a Container, for heroes, feature lists and calls to action.

Show or hide content by screen width, with CSS on web (no flash during SSR), plus useBreakpoint and useBreakpointValue.

Flexbox primitives: Box, Stack, HStack, VStack, Center and Spacer, with responsive direction and alignment.

Keeps a header or a list heading in view while its container scrolls: CSS sticky on web, a pinned ScrollArea header on iOS and Android.

A row or column of related controls, such as actions, filters or formatting, with optional leading, center and trailing regions.

A row that wraps onto new lines, for chips, tags and badges.

Shows where the current page sits in the hierarchy, with links back up to each level.

A list of actions or options that opens from a button.

A text link to another page, a section or an outside site, inside a sentence or on its own.

An always-visible list of actions or destinations, with icons, groups and a selected item.

A bar of menus that stays on screen, as at the top of a desktop app: File, Edit, View.

Switches between three to five top-level destinations of an app, at the bottom of the screen on phones.

Navigation Menu

Site navigation with links and buttons that open panels of more links.

Previous and next buttons around the page numbers of a long list or table.

App navigation down the side of the screen, collapsible to an icon rail.

Progress through a multi-step flow, such as a form wizard or checkout.

Table of Contents

The sections of a page as links, with the current one marked. On web it follows the scroll by itself.

Switch between related panels of content within the same view.

Feedback

An inline message that draws attention without interrupting the task, with optional actions and a dismiss button.

Interrupts the user to confirm an important or destructive action before it happens.

Circular Progress

A ring that fills as a task completes, for tight spaces and dashboards. Without a value it spins.

Asks the user to confirm one action, in one element. An async action keeps it open and busy until it finishes.

A placeholder for an empty list, search or page, with the action that fills it.

Shown in place of content that failed to load, with a retry button.

Shown in place of content while it loads: a spinner, what is loading and a way to cancel.

A value inside a known range, such as storage used, battery left or a score, colored by which part of the range it is in.

Shows how much of a task is complete.

A brief message at the bottom of the screen about something the app did, with an optional action like Undo.

An indeterminate loading indicator.

Brief, non-blocking notifications triggered imperatively with `toast()`.

Overlay

Actions for an area, opened with a right-click on desktop and a long-press on touch screens.

A modal window for focused tasks that require the user’s attention.

A modal panel that slides in from an edge of the screen, for navigation, filters or details.

A preview card that appears when a pointer rests on a link or keyboard focus reaches it.

Rich, interactive content anchored to a trigger, such as quick settings, filters or a short form.

A panel that slides up from the bottom of the screen for extra actions, details or a short form.

A short hint shown when an element is hovered or focused.

A guided walk through a screen: each step highlights an element and shows a card beside it with Back, Next and Skip.

Data Display

Vertically stacked sections that expand to reveal their content, such as FAQs or grouped settings.

A month grid for picking a day or a range, with limits and disabled days.

A surface that groups related content and actions.

A compact element for a filter, an entered value such as a recipient, or a suggested action.

Shows code or terminal commands in a monospace block with a copy button, and optionally a title, line numbers, marked lines and syntax colors.

Shows and hides a section with one trigger, such as "Show 3 more" or "Advanced options".

A table driven by data and columns, with sorting, search, row selection and pagination.

Description List

Terms and their details, such as the fields of an order, a profile or a file: a `dl` on web.

Infinite Scroll

Loads more items as the end of a list comes into view, with loading, error and end states.

A card for one key figure on a dashboard, with its change and an icon.

A vertical list of rows with a leading visual, text and trailing meta.

One row of content: a leading visual, a title and description, trailing meta and actions. Pressable, selectable or a link.

Shows the start of long content, such as a description or a review, with a “Show more” button for the rest. The button appears only when the content is taller than `maxHeight`.

One figure with its label, how it changed and a short note.

Rows and columns of data, with sortable headers, stripes and sideways scrolling.

Events in order along a vertical line, such as an activity feed or order history.

A long list that draws only the rows in view, so thousands of rows scroll smoothly.

Media

Plays a sound with a play button, a seek bar, skip buttons and a speed control, the same on every platform.

A row of slides shown one or a few at a time, moved by swipes, previous and next buttons or dots, with optional autoplay.

A picture in a box of a set size or ratio, with a placeholder and a fallback.

A grid of thumbnails that open a viewer with previous and next.

A video with the platform’s own controls, a fixed aspect ratio, captions on web and an error state.

Advanced

Command Palette

A searchable list of actions in a dialog, opened with ⌘K or Ctrl+K.

A spreadsheet-like grid: move between cells with the arrow keys and edit values in place, with validation.

Events on a month grid, a week or a day of hours, or an agenda list, with Today, previous and next.

A large area to drop files on (web) or tap to pick them, with the files listed below.

A button that opens the file picker, with the picked files listed below.

Search, filter controls built from definitions, active-filter chips, and Apply and Reset, above a table, list or dashboard.

Cards in columns that people move by dragging, with the keyboard, or with screen reader actions.

Markdown Editor

A Markdown editor with a formatting toolbar and a preview, plus Markdown Content to show what was written.

Resizable Panel

Panels side by side or stacked, with handles to drag, or move with the arrow keys, to resize them.

Rich Text Editor

A WYSIWYG editor that shows formatting as you write and saves HTML, plus Rich Text Content to show what was written.

A search field with a magnifier, a clear button and a loading state.

Two lists side by side: check items in one and move them to the other, such as the columns of a table or the members of a team.

A hierarchy of items that open and close, such as folders or place codes.

Charts

A line chart with a light wash under each line, for totals and stacked parts over time.

Compares values across categories as columns or bars, grouped or stacked.

Bars and lines on one value axis, such as results against a target.

Values across two categories as a grid of shaded cells, darker for more: by place and sector, or by day and hour.

Shows change over an ordered axis, such as months, as one or more lines.

Part-to-whole at a glance, as a donut or pie with up to six slices.

Compares a few items across several measures at once, one spoke per measure from a shared zero.

Progress toward a goal as rings: radial bars for a few items, or a gauge for one value.

Shows how two measures relate, one point per row, grouped by color or sized as bubbles.