caliper-ui
About templateabout-templateWho 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.
AccordionaccordionA stack of headings that each reveal their content, one open at a time.
Action buttonaction-buttonA button that runs async work and reports progress, success or failure on itself, at one width.
Action swapaction-swapA button that cycles through a few labelled states, swapping label and icon in place.
Activity heatmapactivity-heatmapA year of daily activity as a grid, with selection, and a footer that opens a ranked breakdown of where the activity went over the grid.
Adaptive stepperadaptive-stepperA quantity control that is a button at zero and a stepper above it.
Agent activityagent-activityA live line of what an agent is doing now, with a loading state.
Agent statusagent-statusOne line inside a reply that says what the agent is doing right now, thinking, searching, reading or writing, with what it is working on and a running clock, then settles into how long it took.
AlertalertAn inline message that keeps context and recovery beside the work.
Alert dialogalert-dialogThe Dialog surface for a decision that cannot be undone: no close button, no outside dismiss, focus starting on the safe choice.
Animated counteranimated-counterA number that counts to its value, with prefix, suffix and locale.
Animated listanimated-listA list whose rows come and go gracefully: new rows open into place, removed rows close their gap and the rest glide to their new positions.
Animated tabsanimated-tabsTabs with an expanding or morphing indicator, including closable tabs.
Announcement barannouncement-barA thin bar for product news that rotates messages and remembers dismissal.
ApprovalsapprovalsCards that ask the user to allow or deny an action, with a risk label.
Arc pickerarc-pickerChoose a value by moving along an arc.
Aspect ratioaspect-ratioA box that keeps a fixed ratio so images and video never shift the layout.
Assistant panelassistant-panelA docked panel that holds a conversation beside the product.
AttachmentattachmentA file or image chip for chat inputs and forms, with an upload fill, a failed state with Retry and a card for images.
Auth pageauth-pageA centred sign-in or sign-up page with a brand header and legal links.
Auto heightauto-heightA container that follows its content's height, so a wizard step, a validation summary or a details panel grows and shrinks instead of snapping. The content changes at once.
Availability scheduleravailability-schedulerPick a day and a time slot from a host's availability.
AvataravatarA person's photo, falling back to initials when there is no image.
Avatar groupavatar-groupA compact stack of avatars with an overflow count and presence.
BadgebadgeA small label for status, category or count.
Bar chartbar-chartA compact bar series with an accessible label.
Billing togglebilling-toggleA monthly/yearly switch whose price animates as it changes.
Blog gridblog-gridA grid of article cards with date, tag and summary.
Blog post templateblog-post-templateOne 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.
Bloom menubloom-menuA button that blooms into a small arc of icon actions.
Blur imageblur-imageAn image that sharpens into place over a blurred placeholder at its final size, and shows its description if it fails.
Book shelfbook-shelfA shelf of documents as spines. Width follows the page count, so a dozen fit in a row and scan like a list. Hover or focus leans a spine out; choosing one pulls it off the shelf and opens its cover and details beside it.
BookletbookletA short ordered read, turned page by page: release highlights, a tour, a report. Turning a page moves it from the pile you have not read to the pile you have, so the piles show how far through you are while the counter tells you exactly.
Bottom sheetbottom-sheetA sheet that rises from the bottom with drag detents.
Box plotbox-plotDistributions side by side as five-number summaries with outliers. Switching to every value spreads the points out from the median on the same axis.
BreadcrumbbreadcrumbThe path to the current page, with each parent linked.
Brush chartbrush-chartA chart you zoom by dragging a brush, with event annotations.
Bullet chartbullet-chartA KPI against its target in one line: the measure fills across poor, fair and good bands toward a target tick, with the gap written out.
Bump chartbump-chartRank changes of several series across periods.
ButtonbuttonButton, part of the Button family.
Button groupbutton-groupA toolbar of related tools in one raised shell; toggled tools sink into it.
CalendarcalendarA month grid for choosing a day or a range, usable on its own or inside a picker.
Call to actioncall-to-actionA closing band with one clear action.
CardcardA titled container with media, status, meta and optional expandable details.
Card foldercard-folderA stack of cards in a folder tab.
Card stackcard-stackA pile of cards you flick through one by one.
Card switchercard-switcherAn app switcher for open pages. Cards fan out in depth by recency: the page you are on is in front and each step back is one page older. Flick a card up to close it, press the front card to open it full size.
CarouselcarouselA swipeable row of slides with controls and dots.
Celebration burstcelebration-burstOne small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice. Skipped under reduced motion; the words say what happened.
Changelog feedchangelog-feedVersioned release notes with typed changes.
Changelog templatechangelog-templateWhat shipped, newest first: dates that stay in view, linkable versions, tag filters with a count and a product view per release.
Character ringcharacter-ringRoom left as a ring that fills as you type, turns amber near the limit with a countdown, and red with the overflow.
Chart story blockchart-story-blockA number told as a story: the chart draws in once, then each beat moves a marker to its moment and explains it. Readers step through; nothing advances on its own.
Chat shellchat-shellThe frame of a chat screen: sidebar of chats, header, transcript and composer.
Chat threadchat-threadA thread of chat messages grouped by sender and time.
CheckboxcheckboxA native checkbox with a clear checked, unchecked and indeterminate state.
ChecklistchecklistA list people tick through: a ticked item is struck out where it is, then settles into Done at the bottom, so what is left stays at the top. Add from the last row, reorder with Alt+arrows, undo from the line that confirms it.
Chip groupchip-groupA set of toggleable chips for single or multiple choices.
CitationscitationsNumbered source references and a list of the sources behind an answer.
Code blockcode-blockSyntax-highlighted code with a language label and a copy button.
Code result blockcode-result-blockCode beside what it makes. Each tab is one small change; switching marks the changed lines and fades the result to its new state. Real text with a copy button.
CollapsiblecollapsibleA single disclosure for optional detail.
Color pickercolor-pickerPick a colour from swatches or a free spectrum, with a contrast readout.
Combo chartcombo-chartAn amount as bars and a rate as a line, on two axes. The bars rise first and the line draws over them; one column highlight reads both.
ComboboxcomboboxA searchable select with grouped options and keywords.
Command palettecommand-paletteA searchable list of destinations and actions opened from the keyboard.
Comment threadcomment-threadComments and replies with a composer.
Comparison blockcomparison-blockThe switch, row by row: the same task the old way and with your product, side by side.
Comparison tablecomparison-tableA feature grid comparing plans or products row by row.
Composition chartcomposition-chartParts of a whole with a comparison to the previous period.
Condensing headercondensing-headerA page header that makes room as you read: the title shrinks into a bar, the description folds away and a border appears, following the scroll.
Confirm morphconfirm-morphA destructive action that morphs into its own confirmation, with undo.
Connection bannerconnection-bannerSays when the app lost its connection and what that means, counts down to the next try, and confirms when it is back.
Contact sectioncontact-sectionA contact form beside the ways to reach a team.
Contact templatecontact-templateA 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 where the reply will go.
Context menucontext-menuA menu opened with a right-click or long press on a piece of content.
Cookie consentcookie-consentAsks once and plainly: reject and accept carry the same weight, choices explain what they are for, and the preferences can be reopened later.
Copy buttoncopy-buttonCopies a value and confirms what was copied, with a fallback when the clipboard is blocked.
Count badgecount-badgeA count on an icon or tab that rolls up or down to its new number, pops once when something new arrives and shrinks away at zero.
CountdowncountdownA live countdown to a date, in a large or compact style.
CTA blockcta-blockThe closing call to action: the promise again, one specific next step and a reassurance line.
Cursor labelcursor-labelA small pill follows the pointer over a labelled area and says what a click does there: Drag, Play, Open. On touch it becomes a label in the corner.
Cylinder carouselcylinder-carouselItems arranged around a rotating cylinder.
Data tabledata-tableAccessible table markup with consistent cell styling and a scrollable region.
Date inputdate-inputA date field you type into, with the reading shown live and a month that carries data marks.
Date pickerdate-pickerA date field that opens a calendar, with min, max and today shortcuts.
Date range pickerdate-range-pickerChoose a start and end date with preset ranges.
Depth timelinedepth-timelineTime as distance. The current row is near and sharp, what comes later recedes along the road, and what has shipped slips behind you. Distance follows certainty too: far rows are labelled Planned or Exploring, and every date and status is written out.
Description listdescription-listA record's details as label and value pairs, side by side when there is room, with copy and edit where the value sits.
Device framedevice-frameShow live UI inside a laptop or a phone. The lid opens and the whole device turns, but the screen is an ordinary subtree laid out at the device's true width (1280 or 390 pixels) inside a size container, so breakpoints and container queries behave exactly as in the product.
DialogdialogA modal window that asks for a decision or a short form, with focus kept inside.
DirectiondirectionSets reading direction for everything inside it. Spacing, borders, affixes and the selected edge follow on their own; icons that point somewhere flip when marked.
Direction spheredirection-sphereA direction input shaped like what it controls. Drag a light across a sphere and a sample beside it takes the highlight and drop shadow of that light. Two sliders carry the same two numbers, so the sphere is a convenience and never the only way in.
Diverging bar chartdiverging-bar-chartAgree–disagree answers centred on neutral, so questions compare by sentiment. Segments grow outward from the centre line.
DockdockA floating dock of icon destinations with a gliding active pill.
Donut chartdonut-chartParts of a whole as a ring, with the total in the centre.
Draw ondraw-onWraps an inline SVG so its strokes draw themselves in, one after another, when it scrolls into view. Nodes can fade in after their line arrives.
DrawerdrawerA panel that slides in from the left or right for editing alongside the page.
Drill down menudrill-down-menuA menu that goes deeper one level at a time: the next level slides in, Back slides it out, and the height eases to fit.
Drop overlaydrop-overlayLets a whole area take dropped files: a clear target rises over the content while files are dragged in and names what will happen.
Dropdown menudropdown-menuA menu of actions anchored to a trigger, with groups, shortcuts and separators.
Dumbbell chartdumbbell-chartA before and an after per row joined by a bar. The after dot travels out from the before value, and sorting by change moves rows to their new places.
Duration fieldduration-fieldA length of time, not a time of day: type it the way you would say it (90, 1h 30m, 1:30), step it with the buttons or arrow keys, or pick a common length.
Dynamic islanddynamic-islandA compact pill that grows to show one live activity, then collapses.
Empty stateempty-stateA message with an icon and a next step for when there is nothing to show.
Error templateerror-templateThe 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, reconnect or get a new link.
Expandable action barexpandable-action-barA compact bar of actions that expands to reveal labels.
Expandable cardexpandable-cardA card that grows in place to reveal its details.
Expanding button groupexpanding-button-groupA row of icon buttons where the focused one expands to show its label.
Expanding searchexpanding-searchA search that expands from an icon into a results list.
Exploded viewexploded-viewPull a composed interface apart along its depth axis so each layer can be named. Spread is one continuous value: at 0 it is the finished interface seen face on, at 1 it is the labelled stack. The list carries every name, and hovering or focusing a row lights its plane and dims the rest.
FAQ blockfaq-blockSearchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches.
FAQ sectionfaq-sectionQuestions that open to reveal answers.
Feature bentofeature-bentoA bento grid of features of different sizes.
Feature rows blockfeature-rows-blockFeatures as numbered rows, each with a product fragment or one figure that proves it.
Feature tabs blockfeature-tabs-blockA short feature tour: features beside one stage, with a thin rule that fills and moves on. It waits while hovered, focused or off screen; choosing a feature or Pause stops it.
Feed streamfeed-streamA live feed that keeps your place: at the top new items slide in; scrolled away, a pill counts what is waiting and takes you back up.
Feedback widgetfeedback-widgetA small widget to rate and comment from any page.
FieldfieldWraps a control with its label, hint, error and optional action, wired for assistive tech.
File difffile-diffA line-by-line comparison of two versions of a file.
File dropzonefile-dropzoneDrop or choose files, with per-file progress, errors and cancel.
File treefile-treeA keyboard-navigable tree for folders and files.
Filter toolbarfilter-toolbarA search field and filter menus with result counts, for narrowing a list.
FixturesfixturesA list of matches or events grouped by date, with scores.
Floating button groupfloating-button-groupA toolbar of icon and label buttons with separators and pressed states.
Fold panelfold-panelAn accordion whose sections are hinged to their headers. Opening turns a section down from edge-on to flat while its height opens, so you can see which header it belongs to and where it goes when it closes. It is the standard accordion underneath: header buttons, aria-expanded, regions named by their header.
Folder tabsfolder-tabsTabs as folders in a drawer. The chosen folder comes to the front and the rest sit behind it with their tabs showing, so you can see how many there are and where you are. Distance back is the number of steps from the open tab.
Footer blockfooter-blockThe page's last word: link columns, a newsletter that confirms in place, the legal line, status and the name as a full-width wordmark.
Funnel chartfunnel-chartStages of a process narrowing as people drop out.
GaugegaugeA dial for one value in a range, with named thresholds.
Heatmap matrixheatmap-matrixTwo categories against each other, coloured by value. The row and column follow the pointer or arrow keys, and choosing a step of the scale isolates its cells.
Hero blockhero-blockThe first screen of a product page: one claim, two actions and a real artefact that proves it.
Hero sectionhero-sectionThe top of a landing page: eyebrow, title, copy, actions and proof.
Hero signuphero-signupA hero with a sign-up form built in.
Hinge panelhinge-panelA list with a detail panel hinged to its edge. Choosing a row swings the panel open toward you from where the list ends, so the detail visibly belongs to the row you chose, and closing swings it back onto the list. The panel itself is flat, readable content.
HistogramhistogramThe shape of a distribution. Choosing coarser or finer bins retargets the same bars, and the median and p95 markers slide to their values.
Hold to confirmhold-to-confirmHold to confirm, part of the Actions family.
Hover cardhover-cardA preview card that appears when hovering or focusing a link or name.
Icon swapicon-swapTurns one icon into another in place for a control whose meaning flips: copy to copied, play to pause, menu to close.
Image compareimage-compareTwo images stacked with a draggable divider.
Image generationimage-generationA card that shows an image as it is generated, from queued to complete.
Image viewerimage-viewerA full-size viewer with zoom and keyboard navigation.
Infinite masonryinfinite-masonryA masonry grid that loads more as you scroll.
Inline editinline-editText that becomes editable in place, with a pencil as the hint.
InputinputA recessed text field with optional leading and trailing affixes; it never jumps when validation appears.
ItemitemA generic row: media, title, description, meta and an action. It uses the data table's row spacing and its hover and selected fills.
JSON viewerjson-viewerA collapsible tree of JSON with copy and search.
KbdkbdKeys as small raised caps: one shortcut per kbd, ⌘ on a Mac and Ctrl elsewhere, with spoken names for symbols.
LabellabelThe visible name for a field, tied to it so a click focuses the control.
Landing templatelanding-templateA whole product page from the Free blocks, in the order buyers decide, with a header that keeps the action in reach.
Layer parallaxlayer-parallaxA composition of layers that shift against each other as the mouse moves, each by its own depth, with the whole scene tilting no more than 5 degrees. It explains how a screen is built: the grid behind, the card on it, the chip and the toast in front. It is for docs and demonstration stages, never for controls or moving text.
Legal templatelegal-templateA 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.
Lift listlift-listA list you reorder by picking a row up. The row you hold comes off the page, rises toward you and leans a few degrees the way you move, and a dashed slot shows where it will land. Space picks up, the arrows move, Space drops, Escape puts it back.
Line chartline-chartOne or more series over time, with hover readout and an optional band.
Liquidity heatmapliquidity-heatmapResting size by price and time as a heatmap with an optional mid line.
Live indicatorlive-indicatorWhether a feed is live, in words and a dot. The dot sends out a soft ring only while live, blinks while reconnecting and rests otherwise, and gives one extra ring for each update you tell it about.
Live passlive-passA credential card with a foil you check by tilting it. A sheen follows the mouse and a VERIFIED mark only shows once the card is tilted far enough, as security foil does on a banknote. A screenshot cannot show it, and the line beneath keeps a ticking clock, so a still image of the pass is obviously stale.
Load moreload-moreThe end of a long list: the next page loads as it comes into view, failures offer a retry, a button does the same for keyboards, and the end says so.
LoaderloaderA small indeterminate indicator in four shapes.
Loading swaploading-swapSwaps a loading placeholder for its content without a jump: the content fades in while the height eases once.
Logo marqueelogo-marqueeCustomer logos in a slow scrolling row.
MagneticmagneticWraps one button or link so it leans toward the pointer as it comes near, up to 8px, and settles back when the pointer leaves.
Marketing sectionsmarketing-sectionsHero, feature and pricing sections for a landing page.
MarqueemarqueeA slow scrolling row of content that pauses on hover.
Mention inputmention-inputA text field that turns @people and #channels into mentions.
MenubarmenubarFile, Edit and View for an app that works like a desktop program: one highlight glides along the bar, and once a menu is open, moving along opens the next.
MessagemessageOne chat message with a role, optional name, status and actions.
Message scrollermessage-scrollerA scrolling transcript that stays pinned to the newest message.
MetermeterA measurement within a known range, with thresholds marked on the track and a word for whether it is fine.
MetricmetricA number with its context, change and a small trend line.
Milestones blockmilestones-blockA history read top to bottom. One line fills as the list scrolls through the window and each marker settles when it is reached, using native scroll only.
Money fieldmoney-fieldA currency amount field with a currency picker and quick-add steps.
Morph surfacemorph-surfaceA floating surface that grows out of the element that opened it.
Morphing modalmorphing-modalA modal whose surface morphs between views, like a menu becoming a confirmation.
Multi chain swapmulti-chain-swapSwap one asset for another across networks, with a quote.
Multi selectmulti-selectChoose several values from a list, shown as a compact summary.
Navigation menunavigation-menuA 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 keyboard.
Newsletter signupnewsletter-signupAn email field with consent and success states.
Not found pagenot-found-pageA friendly 404 with suggestions and search.
Notification bellnotification-bellThe bell that opens notifications: the unread count sits on it and rolls to its new value, the bell swings once when the count rises, and its name always says how many are unread.
Notification centernotification-centerA list of notifications with read state and filters.
Notification stacknotification-stackStacked notifications that fan out on hover or focus.
Number fieldnumber-fieldA numeric field with steppers, limits, a suffix and optional drag-to-scrub.
Number tweennumber-tweenA number that eases to its new value instead of jumping.
Order bookorder-bookBids and asks as depth bars around the spread.
OTP inputotp-inputA segmented field for one-time codes with paste support and status.
Overflow actionsoverflow-actionsA few primary actions with the rest tucked behind an expander.
Page dotspage-dotsWhere you are in a set of slides: the current dot stretches into a pill that fills while slides advance on their own.
Page headerpage-headerA title with description, breadcrumbs and actions.
Page partspage-partsDashboard, password reset and verification screens.
PaginationpaginationPage links with previous and next, sized for touch.
Password fieldpassword-fieldA password input with a show and hide control.
Password strengthpassword-strengthA new-password field that shows a strength meter and the rules it meets.
Phone fieldphone-fieldA phone number field with a country picker, formatting and validity.
Pinned listpinned-listItems you can pin to the top. Pinning moves the row up into Pinned and back again, so the eye follows it, and focus stays on the same pin button.
Plan comparisonplan-comparisonPlans side by side with prices and feature lists.
Polar area chartpolar-area-chartEqual wedges whose length shows the value, for categories with an order around a circle such as months, hours or directions. Wedges grow out from the centre.
PopoverpopoverA small panel anchored to a trigger for quick settings or details.
Prediction marketprediction-marketOutcomes with probabilities and a way to take a position.
Presence listpresence-listA list where an added row opens from nothing and a removed row closes, so a live feed or a queue changes without jumping. The first render is immediate.
Preview railpreview-railA rail of ticks that previews each section on hover and jumps to it.
Price target fanprice-target-fanA price history that fans out into a forecast range.
Pricing blockpricing-blockPricing worked out from the buyer's own numbers: enter seats and each plan shows its total and why it fits.
Pricing templatepricing-templateA pricing page in one voice: the deal in one line, plans worked out from the buyer's numbers, the switch row by row, the last doubts and one action.
Profile pageprofile-pageA person's page: who they are and where, their local time, pinned work, a year of activity and what they did lately. Following updates at once and rolls back if it fails.
ProgressprogressA measured bar for work with a known size, such as an upload.
Progress buttonprogress-buttonA button that fills with determinate progress while its work runs, writes the percentage, and settles on a check.
Progress ringprogress-ringDeterminate progress in a ring that eases to each value, draws a check when done and a cross when it fails.
Project folderproject-folderA folder card that opens to show its contents.
Prompt inputprompt-inputA message box with attachments, suggestions, commands and a stop button.
Proof blockproof-blockLogos set as type, a case study led by one number, press with outlet and date, and live figures with their source.
ProseproseSpacing, 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.
Pull to refreshpull-to-refreshPull a list down to refresh it, with a button for everyone else.
Radial bar chartradial-bar-chartFour to seven categories as concentric arcs that fill toward the largest one. Sorting moves each arc to its new ring.
RadioradioA native radio for choosing exactly one option from a short group.
Radio cardsradio-cardsLarge selectable cards for a choice that needs a title and a description.
Range histogramrange-histogramA range filter over the shape of the data: bars outside the range dim as you drag, and the count in range is written out.
Range sliderrange-sliderA two-handle slider for choosing a range of values.
Rank listrank-listA leaderboard that re-ranks as values change: rows travel to their new place, values count to their new figure, and a mark says how many places each row moved.
RatingratingStars 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 ratings it comes from.
Reaction barreaction-barEmoji reactions under a message or post. Each chip is a toggle; the count rolls and your chip settles with one small pop. The picker adds a new reaction.
Read moreread-moreLong text kept to a few lines until asked for: it opens to its full height, closes to a faded edge, and the button appears only when needed.
Reading progressreading-progressWhere you are in a long page, in a small pill that appears once you start scrolling: a ring that fills as you read, the section you are in and how far through you are. Press it to jump to another section.
Resizable panelsresizable-panelsTwo panels separated by a draggable, keyboard-operable divider.
Result iconresult-iconThe outcome of an operation as a mark that draws itself once: a check, a cross, an exclamation, or a turning arc only while pending.
Returns calendarreturns-calendarA month calendar coloured by daily return, with a compounded total.
Rich text editorrich-text-editorA small editor with bold, italic, lists and links, returning HTML.
RidgelineridgelineStacked distributions that overlap for easy comparison.
Roadmap blockroadmap-blockA public roadmap in now, next and later. Votes roll the count and move the card to its place in the column, so readers see their vote count.
Rotary knobrotary-knobA rotary control with a real edge. The knob is a short cylinder seen from above: a stack of discs gives it thickness, a ring of ticks lights up to the value, and the number is always written beside it. Drag it or use the keys; with detents on it clicks through every tenth.
Scatter chartscatter-chartTwo measures per item, with an optional third as point size. Points grow in, hidden groups shrink away, and a trend line with its fit draws after them.
Scene story blockscene-story-blockA chapter section told by scrolling, with a 3D scene beside it. As you read, the scene tips toward you and its layers spread apart, and the layer the chapter is about lights while the others dim. The chapters are complete without the scene.
Scroll areascroll-areaA labelled, keyboard-focusable scroll region with a quiet scrollbar.
Scroll aware fabscroll-aware-fabThe main action kept in reach: it shows its label at the top and when scrolling up, and shrinks to its icon while you scroll down.
Scroll effectsscroll-effectsTools for effects that follow scroll position, such as progress and reveals.
Scroll shadowscroll-shadowA scroll area whose edges fade only where there is more to see, easing in and out as you reach either end.
Scroll spy navscroll-spy-navAn outline that follows your reading: a marker glides to the section in view, and choosing a link scrolls there and moves focus into it.
Scroll storyscroll-storySections that change as you scroll.
Scroll timelinescroll-timelineA history down the page: the line fills as you scroll and each entry lights and settles as the line reaches it.
SearchsearchA search field with a clear button and the right keyboard on phones.
Secret fieldsecret-fieldA secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer. Copying never needs it revealed.
Segmented controlsegmented-controlSegmented control, part of the Blocks family.
SelectselectA styled native select for choosing one option from a short list.
Select menuselect-menuA select whose list opens with the chosen option over the trigger; the platform picker on touch.
Selection toolbarselection-toolbarActions for the words you selected, where you selected them: the toolbar grows out of the selection and leaves with it; Alt+T reaches it from the keyboard.
SeparatorseparatorA 1px divider in the toolbar's own hairline, with a labelled form for “or continue with email”. Decoration unless you say otherwise.
Session timeoutsession-timeoutA fair warning before a session ends: a dialog counts down with a ring, offers to stay signed in, and signs out at zero.
Shader backgroundshader-backgroundA GPU-drawn animated background.
ShakeshakeNudges a field or control sideways once to say “not accepted”, with an outline instead under reduced motion.
Shared highlightshared-highlightA highlight that glides between the items of a list as focus or hover moves.
Shortcut recordershortcut-recorderPress a key combination to record a keyboard shortcut, with conflict warnings.
Shortcut sheetshortcut-sheetEvery keyboard shortcut in one place: while it is open, pressing a shortcut lights its row instead of running it, and a filter narrows the list.
Showcase blockshowcase-blockThe product one job at a time: tabs beside a single stage, each view swapped in place with one line on what it does.
SidebarsidebarA collapsible navigation rail for an app's main sections.
Sign in formsign-in-formAn email and password form with provider buttons and clear errors.
Sign up formsign-up-formAn account-creation form with a password strength hint and terms.
Signature padsignature-padDraw a signature with a pointer or finger, with undo and clear.
Site footersite-footerLink columns, social links and legal text.
Site headersite-headerA top navigation bar with logo, links and actions.
SkeletonskeletonA placeholder with the shape of the content it stands in for.
Skyline chartskyline-chartA day-by-time grid whose cells rise into columns. Seen from straight above it is an exact heatmap, and colour repeats every height so nothing is lost when it is flat. Tilt it up to see the shape of the week. The busiest cell is the one ember column.
Slide panelsslide-panelsSteps that move like pages: forward slides in from the right, back from the left, the height eases, and focus arrives with the new panel.
Slide to confirmslide-to-confirmA deliberate commit: drag the handle to the end, or use the arrow keys, and it confirms; let go early and it springs back.
SlidersliderA native range input styled to match, with accessible value text.
Slope chartslope-chartItems connected between two moments to show who rose and who fell.
Slot textslot-textText whose characters roll like a slot machine when the value changes.
Sortable listsortable-listA list reordered by dragging or with keyboard commands, with undo.
Sortable tablesortable-tableA table with sortable columns, optional selection, loading and empty states.
SparklinesparklineA tiny trend line with no axes, for use inside text and tables.
Split buttonsplit-buttonA primary action joined to its alternatives; the chosen option becomes the label.
Spotlight gridspotlight-gridA grid where a spotlight follows the pointer.
Stacked area chartstacked-area-chartParts of a whole over time, stacked from the baseline. Switching between values and share morphs the same layers, so growth and share read as one picture.
StaggerstaggerChildren of a group arrive one after another on mount or when scrolled into view, so a new list reads in order.
Stat cardstat-cardA bordered figure with a label, description and change.
Stats bandstats-bandA row of big numbers with short labels.
Status barstatus-barA row of period blocks coloured by service status.
Status morphstatus-morphA status that changes in place: the pill eases to its new width while icon and colour cross over, and the change is announced.
Step loaderstep-loaderWhat a long operation is doing: done steps tick off, the current one turns with its detail, the line fills, and a failure says where and why.
StepperstepperShows where someone is in a multi-step flow and lets them go back.
Steps blocksteps-blockHow it works, step by step, with an honest time and what exists after each step.
StreamgraphstreamgraphStacked series that flow around a centre line.
Streaming responsestreaming-responseMarkdown-like text that renders cleanly while it is still arriving.
Swipe actionsswipe-actionsRow actions revealed by swiping, with a keyboard route to the same actions.
Swipe tabsswipe-tabsTabs for touch: swipe the content and the next panel follows the finger while the indicator slides in step.
SwitchswitchSwitch, part of the Inputs family.
Sync statussync-statusWhether the work on screen is safe, in one pill that changes in place: saving, saved, offline with changes waiting, failed with a retry, or edited elsewhere.
TabstabsSwitch between related views of the same content without leaving the page.
Tag inputtag-inputType and press Enter or comma to turn text into removable tags.
Team blockteam-blockPeople introduced by what they own and how to reach them, with initials when there is no photo.
Testimonials blocktestimonials-blockCustomer quotes that carry a real role and a measurable outcome, set still and readable.
Text looptext-loopOne word in a sentence that cycles through a few options. The widest word reserves the space, it pauses on hover, focus, off screen and in a hidden tab, and a pause button stops it.
Text motiontext-motionText reveals, morphs and shimmer.
TextareatextareaA recessed multi-line field that grows with the draft from 3 to 8 lines.
Theme switchtheme-switchA light and dark toggle that changes at once or reveals the new theme with a circle, seam or wipe.
Thread composerthread-composerA compact reply box for comments and threads, with send and cancel built in.
Ticket stubticket-stubA ticket with a perforated stub. Checking in tears the stub off along the perforation, so used is something you can see on the ticket and not only read. The tear is the feedback; the plain text line on the ticket is the record.
Tilt cardtilt-cardA card that tilts toward the pointer with a soft highlight.
Time pickertime-pickerChoose a time with minute steps and a 12 or 24 hour format.
TimelinetimelineEvents in order with dates and markers.
ToasttoastA short, dismissible message that confirms an action, with an optional undo.
Todo listtodo-listA checklist an agent or user ticks through, with progress.
Toggle and toggle grouptoggleA 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.
Tool resulttool-resultThe outcome of a tool call, collapsed to a summary and expandable to detail.
ToolbartoolbarTools 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 state.
TooltiptooltipA short hint that appears on hover or focus, never the only way to learn something.
Transcript reeltranscript-reelA transcript on a curved surface. The line being read is large and faces you; the lines before and after bend away along a cylinder, so you keep your place while it plays. Every line shows its time and speaker, and clicking one seeks to it.
Transfer listtransfer-listChoose a subset from a long list: tick items and move them across, and they slide into the other side from where they came.
Tree viewtree-viewAn expandable hierarchy with selection and meta text.
TreemaptreemapNested rectangles sized by value, with drill-down.
Trend deltatrend-deltaA change as a chip: the arrow turns to the direction, the number counts to its value, and colour and words say whether it is good.
Upload queueupload-queueFiles on their way up, each with its own progress ring; failures say why with a retry, and rows open and close without the list jumping.
Usage meterusage-meterA segmented bar showing how an allowance is used, with a warning near the limit.
User menuuser-menuA dropdown for the signed-in person's identity and account actions.
View transitionview-transitionMoves between views without a cut: the old view fades or slides out as the new one comes in, with the View Transition API where available.
Voice orbvoice-orbAn animated orb that shows idle, listening, thinking and speaking states.
Volume profilevolume-profileTraded volume by price level, with the value area and last price marked.
Vote controlvote-controlUp and down votes with a rolling score. Choosing the same arrow again clears your vote; the owner saves it optimistically and can revert.
Waffle chartwaffle-chartParts of a whole as a grid of squares you can count.
Wallet cardwallet-cardA payment card with brand, last four digits and actions.
Wheel pickerwheel-pickerA scrolling wheel for choosing one value, with keyboard and wheel support.
Working borderworking-borderA surface whose edge carries a moving light only while real work is pending, such as an agent run or an import. When the work ends the light stops.
Zoom lenszoom-lensA magnifier that follows the pointer, a finger or the arrow keys over an image to show detail.