@caliper

Colour, radius, motion and density tokens, the Tailwind adapter and a small base stylesheet. Every part needs them; import them once in your global CSS. Each p…

Who is behind the product, in the order buyers and candidates check: the belief, how you got here, the numbers, how you work, the people and the next step.

A stack of headings that each reveal their content, one open at a time.

An inline message that keeps context and recovery beside the work.

The Dialog surface for a decision that cannot be undone: no close button, no outside dismiss, focus starting on the safe choice.

A number that counts to its value, with prefix, suffix and locale.

A box that keeps a fixed ratio so images and video never shift the layout.

A centred sign-in or sign-up page with a brand header and legal links.

A person's photo, falling back to initials when there is no image.

A compact stack of avatars with an overflow count and presence.

A small label for status, category or count.

A compact bar series with an accessible label.

A grid of article cards with date, tag and summary.

One article at a reading measure: a progress line under the header, an outline that marks where you are, linkable headings, the author and three related posts.

The path to the current page, with each parent linked.

A familiar action with immediate focus, a tactile press, and optional pending or label feedback that stays on the button itself.

A toolbar of related tools in one raised shell; toggled tools sink into it.

A month grid for choosing a day or a range, usable on its own or inside a picker.

A full calendar: day, week, month and agenda, a month picker and calendar toggles, a now line, and events you create by dragging, move by dragging or with Alt …

A closing band with one clear action.

A titled container with media, status, meta and optional expandable details.

What shipped, newest first: dates that stay in view, linkable versions, tag filters with a count and a product view per release.

A native checkbox with a clear checked, unchecked and indeterminate state.

A set of toggleable chips for single or multiple choices.

A single disclosure for optional detail.

A searchable select with grouped options and keywords.

A searchable list of destinations and actions opened from the keyboard.

A contact form beside the ways to reach a team.

A contact page that routes the message first: pick the topic and it says who answers and how soon. The form keeps what you typed if sending fails and confirms …

A menu opened with a right-click or long press on a piece of content.

Copies a value and confirms what was copied, with a fallback when the clipboard is blocked.

The closing call to action: the promise again, one specific next step and a reassurance line.

Accessible table markup with consistent cell styling and a scrollable region.

A date field that opens a calendar, with min, max and today shortcuts.

Choose a start and end date with preset ranges.

A record's details as label and value pairs, side by side when there is room, with copy and edit where the value sits.

A modal window that asks for a decision or a short form, with focus kept inside.

Sets reading direction for everything inside it. Spacing, borders, affixes and the selected edge follow on their own; icons that point somewhere flip when mark…

Parts of a whole as a ring, with the total in the centre.

A panel that slides in from the left or right for editing alongside the page.

A menu of actions anchored to a trigger, with groups, shortcuts and separators.

A message with an icon and a next step for when there is nothing to show.

The pages people land on when something goes wrong, each with the way out that fits: search, ask for access, retry with a reference, wait out maintenance, reco…

Searchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches.

Wraps a control with its label, hint, error and optional action, wired for assistive tech.

The page's last word: link columns, a newsletter that confirms in place, the legal line, status and the name as a full-width wordmark.

Hold to confirm, part of the Actions family.

A preview card that appears when hovering or focusing a link or name.

A recessed text field with optional leading and trailing affixes; it never jumps when validation appears.

Keys as small raised caps: one shortcut per kbd, ⌘ on a Mac and Ctrl elsewhere, with spoken names for symbols.

The visible name for a field, tied to it so a click focuses the control.

A policy people can read: the short version first, numbered sections with an outline that follows you, linkable clauses, a change history and a print layout.

One or more series over time, with hover readout and an optional band.

A small indeterminate indicator in four shapes.

A number with its context, change and a small trend line.

A site header whose items open frosted panels of links. Hover waits for intent, the panel resizes from one item to the next, and every link is reachable by key…

An email field with consent and success states.

A friendly 404 with suggestions and search.

A numeric field with steppers, limits, a suffix and optional drag-to-scrub.

A segmented field for one-time codes with paste support and status.

A title with description, breadcrumbs and actions.

Page links with previous and next, sized for touch.

A password input with a show and hide control.

A small panel anchored to a trigger for quick settings or details.

A measured bar for work with a known size, such as an upload.

Spacing, a readable measure and quiet links for long-form markup you do not control, such as a Markdown render, release notes or a legal page.

A native radio for choosing exactly one option from a short group.

Stars that are a native radio group: arrows change the value, a pointer previews, half steps when you need them, and a read-only average that says how many rat…

A labelled, keyboard-focusable scroll region with a quiet scrollbar.

A search field with a clear button and the right keyboard on phones.

Segmented control, part of the Blocks family.

A styled native select for choosing one option from a short list.

A select whose list opens with the chosen option over the trigger; the platform picker on touch.

A 1px divider in the toolbar's own hairline, with a labelled form for “or continue with email”. Decoration unless you say otherwise.

A collapsible navigation rail for an app's main sections.

An email and password form with provider buttons and clear errors.

Link columns, social links and legal text.

A placeholder with the shape of the content it stands in for.

A native range input styled to match, with accessible value text.

A tiny trend line with no axes, for use inside text and tables.

A primary action joined to its alternatives; the chosen option becomes the label.

A bordered figure with a label, description and change.

Shows where someone is in a multi-step flow and lets them go back.

Switch, part of the Inputs family.

Switch between related views of the same content without leaving the page.

People introduced by what they own and how to reach them, with their photo or, when there is none, their initials.

A recessed multi-line field that grows with the draft from 3 to 8 lines.

A light and dark toggle that changes at once or reveals the new theme with a circle, seam or wipe.

A short, dismissible message that confirms an action, with an optional undo.

A button that stays pressed, alone or in a raised group that holds one choice or many and moves with the arrow keys as a single tab stop.

Tools with one tab stop: arrows move between them, toggles sit recessed, and when the row runs out of width the last tools fold into a More menu with their sta…

A short hint that appears on hover or focus, never the only way to learn something.

A dropdown for the signed-in person's identity and account actions.