Components
Every component.
99 components in 12 groups. Each page has live examples, the markup they render and every attribute the CSS answers to.
Actions 5
- ButtonFlat tinted fill by default; only the primary action is solid. Padding is block × φ inline.
- Button groupButtons joined into one row, divided by a hairline instead of a gap.
- LinkUnderlined by default, quiet when inside navigation, and a button that looks like one.
- Floating action buttonA fixed square at the bottom end of the viewport for the one primary action.
- ToolbarA row of icon buttons on a tinted track, with hairline separators where groups change.
Inputs 16
- FieldA label, a control and a hint stacked as one. The error message waits until the field has been touched.
- InputFilled, with a hairline along the bottom so an empty field can be found; the ring comes on focus. Validation appears only after you leave a field.
- TextareaA multi-line input that grows with what you type, starting at three lines.
- Input groupPrefix and suffix cells around an input, sharing one focus ring.
- PasswordA password input with a reveal button: one tap shows what you typed, another hides it again.
- SelectThe native select with a masked chevron. For search-as-you-type, use the combobox.
- ComboboxAn input whose option list anchors beneath it with CSS anchor positioning. Filters as you type.
- SearchThe native search input, with the browser's clear button redrawn as a small muted cross.
- Date and timeNative date and time pickers on the input fill, with the picker icon dimmed until hover and inverted on dark themes.
- Colour pickerThe native colour input cut down to a square of input fill, with the swatch inset by one step.
- Number stepperA number input between decrement and increment buttons, sharing one focus ring.
- Tag inputChips inside an input-like container. Enter adds, Backspace removes the last.
- One-time codeSingle-character cells that auto-advance, step back on Backspace and accept a pasted code.
- File inputThe native file input in the input fill, with its browse button drawn as a flat tinted button.
- DropzoneA file target. The dashed outline is the one dashed line in the system, because a target needs one.
- Form layoutsFields that flow into columns, fieldsets that group them, and a sticky action bar for long forms.
Selection 10
- CheckboxA square box that fills with the accent and draws a tick when checked. No class needed.
- RadioSquare, with a centred square dot. It rounds only under the soft and round radius presets.
- SwitchA checkbox with role="switch", drawn as a φ : 1 track whose thumb slides across.
- Segmented controlRadio inputs in a tinted track; the chosen segment lifts onto a surface.
- RangeA thin tinted track with a square of frosted glass for a thumb; the fill follows --value, which aequitas.js keeps in sync.
- Range pairTwo native ranges on one track, for picking a span. Each thumb keeps its own keyboard and value; the fill runs between them.
- Choice cardA selectable card around a radio or checkbox. Selection is the one state that earns a ring.
- RatingFive squares, not stars. Pure CSS fill via :has(), with a hover preview.
- Swatch pickerColour choices as radio squares; the chosen one gets a two-ring halo.
- CalendarA month grid with today, selection and range states. Presentational; wire it to your own dates.
Surfaces 4
- CardFrosted glass with a top specular. Hover deepens the shadow; nothing moves.
- FrostMake anything glass. Translucent fill, blur and saturation, set by three tokens.
- ListAn inset grouped list. Rows can be links or buttons; group headers stick while their group scrolls.
- AccordionNative details/summary. Height animates through ::details-content and interpolate-size, no JS.
Data display 11
- TableHairlines between rows only. Sortable headers, a selection column, striped and compact variants.
- Selection barA frosted bar that floats in while table rows are checked: the count, and what you can do with them.
- StatA big tabular number over a small label. A row of them divides with hairlines on wide screens.
- DeltaA change in a figure: a small triangle and the value, green going up, red going down.
- BadgeA small tinted label. Tone-aware; solid and outline variants when the tint is not enough.
- ChipA removable tag, or a filter when it wraps a checkbox.
- AvatarSquare initials or an image, three sizes, an overlap group and a status corner.
- Status dotA small square in a tone. Reads at a glance next to a label.
- PropertiesKey-value rows for detail panes and inspectors: muted keys, values that wrap, hairlines between rows.
- BoardKanban columns that scroll and snap horizontally; cards inside are light glass.
- TimelineEvents in order with a square marker and a hairline connector.
Content 11
- TypographyHeadings sit on the √φ type scale, h6 at φ^-½ up to h1 at φ³; body leading is φ. Roles for eyebrow, lead, display and caption.
- CodeInline code and keys, and a block with a filename header and a copy action.
- IconMask-based icons in currentColor with squared caps. The full set lives in the reference.
- DividerA hairline with an optional label. The only line the system draws between siblings.
- MediaGolden-ratio media that covers its box, with a caption overlaid on a dark gradient.
- FrameA box with a fixed aspect ratio that crops its content to fit. Golden unless told otherwise.
- StageA sunken box that shows media whole: any aspect, scaled down to fit, never cropped and never overflowing. Where a frame crops, a stage fits.
- CarouselScroll-snap with native ::scroll-marker squares where the browser supports them: hollow, and filled for the item in view.
- SwatchesFor documenting tokens: a φ-ratio colour block with a monospace label.
- Scroll fadesEdges fade only on the side that has more to scroll, driven by the scroll position itself.
- Visually hiddenText for screen readers only: clipped to a single pixel, still read aloud and still in the tab order.
Feedback 9
- AlertAn inline message tinted by its tone. Errors say what happened and how to fix it.
- ToastA transient notice in a fixed corner. Enters with @starting-style; leaves with data-leaving.
- BannerA full-width announcement in a solid tone.
- ProgressThe native <progress>, thin and square. Without a value it sweeps.
- MeterThe native <meter>, coloured by band: good, fair or poor against low, high and optimum.
- Loading barA thin accent line along the top of the viewport while a page or request loads.
- SpinnerThree pulsing squares, not a ring. The same motion appears inside busy buttons and cards.
- SkeletonPlaceholders that shimmer while content loads; static under reduced motion.
- Empty stateAn empty screen is an invitation to act, not a mood.
Overlays 7
- DialogThe native dialog on thick glass with a blurred backdrop. Opens with data-open; closes with data-close.
- DrawerA dialog that slides in from an edge: end by default, or start, or bottom as a sheet.
- PopoverAnchored content on thick glass. For anything richer than a tooltip and lighter than a dialog.
- MenuA popover anchored to its button, with separators, group labels, shortcuts, checks and destructive items.
- Command paletteA ⌘K dialog: a large search input over grouped options with shortcut hints.
- LightboxA dialog with no chrome: the media floats on a heavily blurred backdrop.
- TooltipAttribute-driven. Shows on hover and keyboard focus after a short delay.
App chrome 9
- WindowA window frame with squared traffic lights. For product shots and apps that want to feel native.
- MenubarTop-level menus in a row, each opening a popover menu.
- StatusbarA thin bottom strip for state: position, encoding, counts.
- Page headerEyebrow and title at the start, actions at the end.
- HandleA drag grip of two dotted columns for rows the user can reorder.
- ResizableA panel the user resizes by its corner, with CSS alone.
- DockA floating glass bar of square app buttons; the current one carries a marker below.
- Tab barBottom navigation for phones: icon over label, the current one in the accent.
- FooterThe end of a page: small muted type, link columns and a hairline above. No fill of its own.
Marketing 5
- HeroEyebrow, display headline, lede and actions. Centred or start-aligned.
- Feature gridWhat the product does, in a few short blocks: an icon in the tone, a title and a sentence each.
- PricingTiers as cards; the featured tier is solid in the tone.
- TestimonialA customer's words in quotation marks, with a face and a name underneath.
- Logo cloudCustomer marks in a quiet row: greyscale and muted until hovered.