Components
2 · the specimen cabinetThe same component, as 7 design systems really draw it. Each room on this floor is a group of components — what a person is doing with them, not how they are built — and each component in it is drawn by every system that ships it, from that system’s own package, live. Where a system does not ship one, the page says so and draws nothing in its place. 74 components in 9 rooms.
Doing
Controls that make something happen the moment they are used.
Button · Button group · Menu button · Floating action button · Bulk actions → 10 componentsChoosing
Controls that record a decision among options that are already on the table: on or off, one of few, one of many, a point on a range.
Checkbox · Checkbox group · Radio button · Radio button group · Toggle · Select · Slider · Content switcher · Selectable tag · Filters → 10 componentsEntering
Controls where the person supplies the value rather than picking it: typed, completed, dated, uploaded.
Text input · Autocomplete · Date picker · Time picker · Search · File uploader · Number input · Password input · Color picker · Input group → 6 componentsForms
The structure around fields: the form itself, the field, its label and hint, and what it says when something is wrong.
Form · Form field · Fieldset · Form label · Helper text · Error message → 6 componentsInterrupting and annotating
Layers and messages that appear over or beside the page: some demand an answer, some only explain, some only report.
Modal · Side panel · Popover · Tooltip · Toast notification · Inline notification → 11 componentsOrganising content
Structures that decide how much of a page is visible at once, and how its parts relate.
Tabs · Accordion · Disclosure · Card · Divider · Item list · List · Table · Data table · Tree view · Description list → 10 componentsNavigating
Ways to get from here to somewhere else, and to know where here is.
Link · Breadcrumb · Pagination · Menu · Navigation bar · Side navigation · Header · Footer · Page header · Skip to content → 11 componentsShowing state and identity
Small signs that say how far something has got, what state it is in, what it is called, or whose it is.
Progress bar · Spinner · Badge · Tag · Dismissible tag · Tag group · Avatar · Avatar group · Step indicator · Skeleton · Empty state → 5 componentsContent
The words, pictures and symbols a page is made of.
Heading · Paragraph · Image · Icon · Keyboard key →Two ways in that are not rooms
One page, every system
A delivery form with identical words and fields, drawn by all 7 design systems. Flip the toggle and everything but the content changes.
open the exhibit → CMP·01 · a biographyThe button
Eight specimens drawn in CSS, and 63 primary buttons measured off live pages. Where it came from, what it replaced, and what it still cannot do.
read →The evidence behind it
Who ships what
All 74 components against all 7 systems, and whether each builds on the native element.
coverage → The galleryHow it was read
Every cell was read twice from raw sources. How large the vocabulary really is, how a component gets in, and what this cannot say.
method → CollectionsThe component census
391 distinct components across 8 systems. Only 3 appear in all eight, and 325 appear in exactly one.
391 → CollectionsDesign as infrastructure
122 publishers. 92 of them ship components and no writing guidance at all.
122 →