React components, blocks and complete product screens drawn to one specification. Accessible by default, with every state designed. Free parts are MIT and install as source you own.
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.
Wraps 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.
A menu that goes deeper one level at a time: the next level slides in, Back slides it out, and the height eases to fit.
A menu of actions anchored to a trigger, with groups, shortcuts and separators.
Lets a whole area take dropped files: a clear target rises over the content while files are dragged in and names what will happen.
A 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.
A 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.
A compact pill that grows to show one live activity, then collapses.
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, reconnect or get a new link.
A compact bar of actions that expands to reveal labels.
A card that grows in place to reveal its details.
A row of icon buttons where the focused one expands to show its label.
A search that expands from an icon into a results list.
Pull 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.
Searchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches.
Questions that open to reveal answers.
A bento grid of features of different sizes.
Features as numbered rows, each with a product fragment or one figure that proves it.
A 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.
A small widget to rate and comment from any page.
A 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.
Wraps a control with its label, hint, error and optional action, wired for assistive tech.
A line-by-line comparison of two versions of a file.
Drop or choose files, with per-file progress, errors and cancel.
A keyboard-navigable tree for folders and files.
A search field and filter menus with result counts, for narrowing a list.
A list of matches or events grouped by date, with scores.
A toolbar of icon and label buttons with separators and pressed states.
Tabs 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.
An 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.
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.
Stages of a process narrowing as people drop out.
A dial for one value in a range, with named thresholds.
Two 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.
The first screen of a product page: one claim, two actions and a real artefact that proves it.
The top of a landing page: eyebrow, title, copy, actions and proof.
A hero with a sign-up form built in.
A 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.
The 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 confirm, part of the Actions family.
A preview card that appears when hovering or focusing a link or name.
Turns one icon into another in place for a control whose meaning flips: copy to copied, play to pause, menu to close.
Two images stacked with a draggable divider.
A card that shows an image as it is generated, from queued to complete.
A full-size viewer with zoom and keyboard navigation.
A masonry grid that loads more as you scroll.