Components
The free core: controls, feedback, overlays, navigation and charts. Each page has a live preview, the source to copy and the props.
232 pages · 10 categoriesNew releases 6
- Activity 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. · Charts
- Agent 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. · AI & agents
- ChecklistA 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. · Inputs
- Duration 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. · Dates & colour
- Notification 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. · Feedback & status
- Reading 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. · Motion & media
Actions 22
- ButtonA familiar action with immediate focus, a tactile press, and optional pending or label feedback that stays on the button itself.
- Split buttonA primary action joined to its alternatives; the chosen option becomes the label.
- Button groupA toolbar of related tools in one raised shell; toggled tools sink into it.
- Hold to confirmA destructive action that asks for intent, not a dialog.
- Swipe actionsRow actions revealed by swiping, with a keyboard route to the same actions.
- Action buttonA button that runs async work and reports progress, success or failure on itself, at one width.
- Copy buttonCopies a value and confirms what was copied, with a fallback when the clipboard is blocked.
- Action swapA button that cycles through a few labelled states, swapping label and icon in place.
- Confirm morphA destructive action that morphs into its own confirmation, with undo.
- Floating button groupA toolbar of icon and label buttons with separators and pressed states.
- Expanding button groupA row of icon buttons where the focused one expands to show its label.
- Expandable action barA compact bar of actions that expands to reveal labels.
- Overflow actionsA few primary actions with the rest tucked behind an expander.
- Bloom menuA button that blooms into a small arc of icon actions.
- Dropdown menuA menu of actions anchored to a trigger, with groups, shortcuts and separators.
- Context menuA menu opened with a right-click or long press on a piece of content.
- ToolbarTools 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.
- MenubarFile, 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.
- KbdKeys as small raised caps: one shortcut per kbd, ⌘ on a Mac and Ctrl elsewhere, with spoken names for symbols.
- Icon swapTurns one icon into another in place for a control whose meaning flips: copy to copied, play to pause, menu to close.
- Reaction barEmoji reactions under a message or post.
- Vote controlUp and down votes with a rolling score.
Inputs 34
- LabelThe visible name for a field, tied to it so a click focuses the control.
- SelectA styled native select for choosing one option from a short list.
- SwitchAn immediate on/off setting built on a native checkbox with role="switch", so forms, labels and reset just work.
- Money fieldA currency amount field with a currency picker and quick-add steps.
- Phone fieldA phone number field with a country picker, formatting and validity.
- Tag inputType and press Enter or comma to turn text into removable tags.
- Mention inputA text field that turns @people and #channels into mentions.
- Expanding searchA search that expands from an icon into a results list.
- Inline editText that becomes editable in place, with a pencil as the hint.
- ComboboxA searchable select with grouped options and keywords.
- Multi selectChoose several values from a list, shown as a compact summary.
- Chip groupA set of toggleable chips for single or multiple choices.
- Radio cardsLarge selectable cards for a choice that needs a title and a description.
- Billing toggleA monthly/yearly switch whose price animates as it changes.
- TextareaA recessed multi-line field that grows with the draft from 3 to 8 lines.
- Range sliderA two-handle slider for choosing a range of values.
- Pull to refreshPull a list down to refresh it, with a button for everyone else.
- Shortcut recorderPress a key combination to record a keyboard shortcut, with conflict warnings.
- OTP inputA segmented field for one-time codes with paste support and status.
- Rich text editorA small editor with bold, italic, lists and links, returning HTML.
- Signature padDraw a signature with a pointer or finger, with undo and clear.
- File dropzoneDrop or choose files, with per-file progress, errors and cancel.
- Select menuA select whose list opens with the chosen option over the trigger; the platform picker on touch.
- InputA recessed text field with optional leading and trailing affixes; it never jumps when validation appears.
- CheckboxA native checkbox with a clear checked, unchecked and indeterminate state.
- RadioA native radio for choosing exactly one option from a short group.
- FieldWraps a control with its label, hint, error and optional action, wired for assistive tech.
- Number fieldA numeric field with steppers, limits, a suffix and optional drag-to-scrub.
- Password fieldA password input with a show and hide control.
- Password strengthA new-password field that shows a strength meter and the rules it meets.
- Adaptive stepperA quantity control that is a button at zero and a stepper above it.
- SliderA native range input styled to match, with accessible value text.
- RatingStars 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.
- ChecklistA 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.
Dates & colour 9
- CalendarA month grid for choosing a day or a range, usable on its own or inside a picker.
- Date pickerA date field that opens a calendar, with min, max and today shortcuts.
- Time pickerChoose a time with minute steps and a 12 or 24 hour format.
- Date range pickerChoose a start and end date with preset ranges.
- Wheel pickerA scrolling wheel for choosing one value, with keyboard and wheel support.
- Color pickerPick a colour from swatches or a free spectrum, with a contrast readout.
- Date inputA date field you type into, with the reading shown live and a month that carries data marks.
- Arc pickerChoose a value by moving along an arc.
- Duration 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.
Overlays & disclosure 14
- PopoverA small panel anchored to a trigger for quick settings or details.
- DrawerA panel that slides in from the left or right for editing alongside the page.
- Bottom sheetA sheet that rises from the bottom with drag detents.
- Hover cardA preview card that appears when hovering or focusing a link or name.
- Expandable cardA card that grows in place to reveal its details.
- Morphing modalA modal whose surface morphs between views, like a menu becoming a confirmation.
- Command paletteA searchable list of destinations and actions opened from the keyboard.
- AccordionA stack of headings that each reveal their content, one open at a time.
- CollapsibleA single disclosure for optional detail.
- Scroll areaA labelled, keyboard-focusable scroll region with a quiet scrollbar.
- Resizable panelsTwo panels separated by a draggable, keyboard-operable divider.
- DialogA modal window that asks for a decision or a short form, with focus kept inside.
- TooltipA short hint that appears on hover or focus, never the only way to learn something.
- Morph surfaceA floating surface that grows out of the element that opened it.
Feedback & status 18
- SkeletonA placeholder with the shape of the content it stands in for.
- ProgressA measured bar for work with a known size, such as an upload.
- LoaderA small indeterminate indicator in four shapes.
- AlertAn inline message that keeps context and recovery beside the work.
- ToastA short, dismissible message that confirms an action, with an optional undo.
- Announcement barA thin bar for product news that rotates messages and remembers dismissal.
- StepperShows where someone is in a multi-step flow and lets them go back.
- CountdownA live countdown to a date, in a large or compact style.
- Usage meterA segmented bar showing how an allowance is used, with a warning near the limit.
- BadgeA small label for status, category or count.
- Empty stateA message with an icon and a next step for when there is nothing to show.
- MeterA measurement within a known range, with thresholds marked on the track and a word for whether it is fine.
- Cookie consentAsks once and plainly: reject and accept carry the same weight, choices explain what they are for, and the preferences can be reopened later.
- Result 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.
- Working borderA surface whose edge carries a moving light only while real work is pending, such as an agent run or an import.
- Live indicatorWhether a feed is live, in words and a dot.
- Sync 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.
- Notification 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.
Data display 15
- Segmented controlOne choice from a few visible options.
- MetricA number with its context, change and a small trend line.
- Bar chartA compact bar series with an accessible label.
- Data tableAccessible table markup with consistent cell styling and a scrollable region.
- Filter toolbarA search field and filter menus with result counts, for narrowing a list.
- Sortable tableA table with sortable columns, optional selection, loading and empty states.
- Tree viewAn expandable hierarchy with selection and meta text.
- Returns calendarA month calendar coloured by daily return, with a compounded total.
- Price target fanA price history that fans out into a forecast range.
- Volume profileTraded volume by price level, with the value area and last price marked.
- Order bookBids and asks as depth bars around the spread.
- Liquidity heatmapResting size by price and time as a heatmap with an optional mid line.
- Stat cardA bordered figure with a label, description and change.
- SparklineA tiny trend line with no axes, for use inside text and tables.
- Description listA record's details as label and value pairs, side by side when there is room, with copy and edit where the value sits.
Charts 26
- GaugeA dial for one value in a range, with named thresholds.
- Animated counterA number that counts to its value, with prefix, suffix and locale.
- Line chartOne or more series over time, with hover readout and an optional band.
- Donut chartParts of a whole as a ring, with the total in the centre.
- Funnel chartStages of a process narrowing as people drop out.
- Bump chartRank changes of several series across periods.
- Composition chartParts of a whole with a comparison to the previous period.
- Status barA row of period blocks coloured by service status.
- RidgelineStacked distributions that overlap for easy comparison.
- TreemapNested rectangles sized by value, with drill-down.
- Activity 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.
- StreamgraphStacked series that flow around a centre line.
- Brush chartA chart you zoom by dragging a brush, with event annotations.
- Waffle chartParts of a whole as a grid of squares you can count.
- Slope chartItems connected between two moments to show who rose and who fell.
- Stacked area chartParts of a whole over time, stacked from the baseline.
- Combo chartAn amount as bars and a rate as a line, on two axes.
- Scatter chartTwo measures per item, with an optional third as point size.
- HistogramThe shape of a distribution.
- Box plotDistributions side by side as five-number summaries with outliers.
- Heatmap matrixTwo categories against each other, coloured by value.
- Bullet 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.
- Radial bar chartFour to seven categories as concentric arcs that fill toward the largest one.
- Polar area chartEqual wedges whose length shows the value, for categories with an order around a circle such as months, hours or directions.
- Dumbbell chartA before and an after per row joined by a bar.
- Diverging bar chartAgree–disagree answers centred on neutral, so questions compare by sentiment.
Motion & media 55
- Shared highlightA highlight that glides between the items of a list as focus or hover moves.
- Scroll effectsTools for effects that follow scroll position, such as progress and reveals.
- Shader backgroundA GPU-drawn animated background.
- Slot textText whose characters roll like a slot machine when the value changes.
- Number tweenA number that eases to its new value instead of jumping.
- Text motionText reveals, morphs and shimmer.
- Image compareTwo images stacked with a draggable divider.
- CarouselA swipeable row of slides with controls and dots.
- Card stackA pile of cards you flick through one by one.
- Cylinder carouselItems arranged around a rotating cylinder.
- Tilt cardA card that tilts toward the pointer with a soft highlight.
- Image viewerA full-size viewer with zoom and keyboard navigation.
- MarqueeA slow scrolling row of content that pauses on hover.
- Text loopOne word in a sentence that cycles through a few options.
- Presence listA list where an added row opens from nothing and a removed row closes, so a live feed or a queue changes without jumping.
- Auto 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.
- Pinned listItems you can pin to the top.
- Rank 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.
- Celebration burstOne small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice.
- Scroll shadowA scroll area whose edges fade only where there is more to see, easing in and out as you reach either end.
- StaggerChildren of a group arrive one after another on mount or when scrolled into view, so a new list reads in order.
- Progress ringDeterminate progress in a ring that eases to each value, draws a check when done and a cross when it fails.
- Count 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.
- Trend 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.
- Status morphA status that changes in place: the pill eases to its new width while icon and colour cross over, and the change is announced.
- ShakeNudges a field or control sideways once to say “not accepted”, with an outline instead under reduced motion.
- Read 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.
- Blur imageAn image that sharpens into place over a blurred placeholder at its final size, and shows its description if it fails.
- Loading swapSwaps a loading placeholder for its content without a jump: the content fades in while the height eases once.
- Slide 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.
- Progress buttonA button that fills with determinate progress while its work runs, writes the percentage, and settles on a check.
- Secret fieldA secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer.
- Character ringRoom left as a ring that fills as you type, turns amber near the limit with a countdown, and red with the overflow.
- Range 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.
- Transfer listChoose a subset from a long list: tick items and move them across, and they slide into the other side from where they came.
- Zoom lensA magnifier that follows the pointer, a finger or the arrow keys over an image to show detail.
- Page dotsWhere you are in a set of slides: the current dot stretches into a pill that fills while slides advance on their own.
- Swipe tabsTabs for touch: swipe the content and the next panel follows the finger while the indicator slides in step.
- Drill 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.
- Slide 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.
- Step 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.
- Scroll timelineA history down the page: the line fills as you scroll and each entry lights and settles as the line reaches it.
- Condensing 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.
- View 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.
- Scroll 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.
- Upload 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.
- Feed 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.
- Scroll 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.
- Load 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.
- Shortcut 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.
- Selection 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.
- Drop overlayLets a whole area take dropped files: a clear target rises over the content while files are dragged in and names what will happen.
- Connection bannerSays when the app lost its connection and what that means, counts down to the next try, and confirms when it is back.
- Session timeoutA fair warning before a session ends: a dialog counts down with a ring, offers to stay signed in, and signs out at zero.
- Reading 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.
AI & agents 21
- Assistant panelA docked panel that holds a conversation beside the product.
- Prompt inputA message box with attachments, suggestions, commands and a stop button.
- Message scrollerA scrolling transcript that stays pinned to the newest message.
- Voice orbAn animated orb that shows idle, listening, thinking and speaking states.
- Chat shellThe frame of a chat screen: sidebar of chats, header, transcript and composer.
- MessageOne chat message with a role, optional name, status and actions.
- Image generationA card that shows an image as it is generated, from queued to complete.
- CitationsNumbered source references and a list of the sources behind an answer.
- Agent activityA live line of what an agent is doing now, with a loading state.
- File diffA line-by-line comparison of two versions of a file.
- Tool resultThe outcome of a tool call, collapsed to a summary and expandable to detail.
- Streaming responseMarkdown-like text that renders cleanly while it is still arriving.
- Todo listA checklist an agent or user ticks through, with progress.
- ApprovalsCards that ask the user to allow or deny an action, with a risk label.
- Code blockSyntax-highlighted code with a language label and a copy button.
- TimelineEvents in order with dates and markers.
- Comment threadComments and replies with a composer.
- Chat threadA thread of chat messages grouped by sender and time.
- JSON viewerA collapsible tree of JSON with copy and search.
- Thread composerA compact reply box for comments and threads, with send and cancel built in.
- Agent 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.