components

all 48 of them, grouped by what they're for. every page has a live preview, a few examples and the source.

actions

3

button→a raised face sitting in a bezel. the bezel stays put, the face lifts when you hover and sinks when you press.button group→a few keys sharing one bezel. handy for toolbars and social links.close button→the little key that closes alerts, banners, modals and drawers.

forms

7

input→a text field set into the surface. when you focus it, the well comes up flush and draws its border.textarea→a field for longer writing. it can grow with what you type if you'd like.select→looks like a field, opens a panel of options. works with the keyboard too.checkbox→a small sunken box. the check pops in and draws itself when you tick it.radio group→pick one option from a few. the dot slides over to whatever you choose.toggle→a switch for settings that should take effect right away.tag input→type a word, hit enter or a comma, and it turns into a tag. backspace takes it away.

navigation

7

tabs→a sunken well with a raised thumb that slides between tabs. arrow keys work as well.pagination→page numbers in a well, with a thumb that slides to the page you're on.breadcrumb→shows where you are, and how you got there.sidebar→grouped navigation in a panel. a dark pill slides to whatever's active.steps→shows how far along someone is in a flow with a few steps.table of contents→a thin track with a marker that follows the heading you're reading. the one on the right of these pages is this component.command palette→a searchable list of actions in a dialog. press ⌘k on this site to try the one that searches these docs.

overlays

6

modal→a dialog that springs in over the page. escape closes it and focus goes back where it was.drawer→a panel that slides in from the side, for things that don't need the whole page.popover→a bit of content that opens next to whatever you clicked.tooltip→a short label that shows up when you hover or focus something.dropdown menu→a menu of actions under a trigger, with shortcuts, dividers and a red one for deleting.toast→little notes that stack up in the corner and fan out when you hover. wrap your app in ToastProvider, then call toast() from anywhere.

feedback

5

alert→a message that sits in the page, with an icon tile that changes per variant.banner→a wide announcement strip, built just like a primary button.progress→a track that fills up as something gets done.skeleton→placeholders while things load. one band of light sweeps across all of them together.empty state→what to show when a list or page has nothing in it yet, plus something to do about it.

data display

10

badge→a small raised label for status and little bits of info.avatar→someone's photo, or their initials on a raised tile when there isn't one.kbd→a little keycap for keyboard shortcuts.table→rows of data in a panel. you can render cells however you like and make rows clickable.data list→labels and values, for describing one thing in detail.stat→a big number that counts up into place, with a label and a trend.stat card→a number on a card, with how it's changed and an optional sparkline.timeline→a list of things that happened, newest first.code block→code on a raised face, with the filename up top, light highlighting and a copy key.accordion→sections that open up when you click them.

cards

6

card shell→the frame every card is built on: a bezel holding a face. content goes on the face, buttons and context go on the strip below.card→ready-made cards in two layouts: split (title and picture side by side) and stack (picture on top).quote card→a quote, with who said it on the strip below.spotlight card→a big card for announcements, with room for an eyebrow, an icon and a couple of buttons.author card→an author's avatar, name and bio, with a follow button.carousel→slides that move on by themselves or when you nudge them, with a thin line showing time left.

editorial

4

reading progress→a thin line along the top of the window that fills as you read.reading time→roughly how long an article takes to read.reaction bar→emoji reactions that count up when readers tap them.share buttons→share a post to social sites, or copy its link.