Components
Every component, organised by layer.
Foundation
Mechanism primitives the components share.
An indicator that turns as a region opens and closes
A highlight that slides between active items
A ripple spreading from the point of contact
Text visible only to screen readers
Typography
How text, code, lists and quotations are set in body content.
Quotes a passage from elsewhere
Inline code within body text
A block of code with highlighting and copying
Pairs of names and values
Headings with semantics and size decoupled
A keyboard key, for documenting shortcuts
Folds long content to a set number of lines, expandable when it overflows
A text link that can render as a router component
Ordered and unordered lists
Marks text, such as search hits
Formats numbers for the current language
A rich text container that styles native tags
Hides spoilers until revealed
Body text
Displays time in the current language
Layout
Containers that arrange their children — direction, spacing and alignment.
Sticky container
Holds its content to a given width-to-height ratio
Centres its content on both axes
Holds page content to a readable width and centres it
A hairline that separates two pieces of content
A flex container with full control over its axes
A grid container with a fixed number of columns
Lays its children out in a row, wrapping when needed
Masonry
A scrolling region with overlay scrollbars
An even grid whose columns follow a minimum width
An empty element that takes up room in a flex container
Panes whose proportions are adjusted by dragging a divider
Lays its children out in a single column
Atoms
The smallest reusable units — buttons, tags and badges.
A round portrait standing for a person or entity
Pins an unread count to the corner of its host
Triggers a single action
Joins several buttons into one unit
An item that can be selected or removed
Dismisses dialogs, drawers and toasts
Writes a piece of text to the clipboard
A prominent action at the edge of a page or container
An icon-only button that requires a name
A small dot that shows a status
A placeholder that holds the shape of loading content
A spinning indicator for work in progress
A primary action joined to a menu of alternatives
A short label for status, category or attribute
Forms
Controls for entering, choosing and submitting data.
Free-text input with caret-aware suggestions
Ticks one option, or several out of many
A set of checkboxes sharing one array value
A select that filters as you type
Types a date or time segment by segment
Types a date or picks it from a calendar
Types a start and an end date segment by segment
Types a date range or picks it from a calendar
Types a date and time or picks them from a calendar and a time field
Edit text in place with save and cancel
Picks files by clicking or dropping
Collects field values, validates them and submits
Pairs a control with its label, description and error
Groups fields into a grid with a title and description
A single-line text field
Joins addons and buttons with a field into one surface
An always-visible list of options
Types to search and picks several items
Picks several items from a list
A field for entering numbers
A password field with a visibility toggle
Enters a code one character per cell
Picks exactly one option from a set
Picks a range within bounds with two thumbs
Rates with stars or shows a score
A field for entering a search query
Switches among a few peer options
Picks one item from a list
Picks a number within a range by dragging
Toggles between on and off
Enters several values as removable tags
A multi-line text field
Types a time segment by segment
A two-state button that stays pressed
An expandable tree with cascading checkbox selection
Picks one item from a tree
Overlays
Panels and hints that float above the page.
A confirmation dialog that needs an explicit answer
A keyboard-summoned search panel for picking commands and pages
A menu that opens at the pointer on right-click or long press
A modal dialog that interrupts the current task
A modal panel that slides in from the screen edge
A set of actions revealed on click
A preview card that floats out while hovering a link
A full-screen image preview with controlled visibility and selection
A loading indicator laid over an area, shown after a short wait
A row of menus, like the menu bar of a desktop app
An outside layer that coexists with modal overlays
A confirmation bubble that floats out next to its trigger
A small panel that floats out on click
A panel that rises from the bottom of the screen and can be dragged shut
Short feedback that floats in after an action
A short note shown on hover or focus
A step-by-step guide that highlights parts of the page
Display
Panels, containers and states that carry and present content.
A list of sections that expand and collapse in turn
A message bar that appears in the page after something happens
An announcement bar across the top of the page
Shows a month and picks a date
A note written into the content
Gathers a group of content onto one raised surface
Browse content with dragging, grouping and optional rotation
A region a single trigger opens and closes
A placeholder for an area with nothing in it, saying why and what to do next
An image that loads lazily and falls back when it fails
A segmented bar showing how parts make up a whole
Month display
A card with a standard title bar, with places for a title, a count and actions
A bar whose fill shows how much of a task is done
Scannable SVG codes with image export
Shows a month and picks a date range
The outcome of an operation, as success, error, warning or info
A ring whose arc shows how much of a task is done
A key figure set large, with its label and change
Several sets of content shown one at a time in the same place
An ordered sequence of events with connected markers
Data
Components that organise and present sets of data in rows and columns.
List and grid data views with pagination and custom items
A data table with sorting, filtering, pagination and row selection
Selects a page within a numbered range
Static data organised into rows and columns
A virtual list with dynamic item sizes
Shell
The outer frame that carries the interface and divides it into regions.