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.
Text that becomes editable in place, with a pencil as the hint.
A recessed text field with optional leading and trailing affixes; it never jumps when validation appears.
A generic row: media, title, description, meta and an action. It uses the data table's row spacing and its hover and selected fills.
A collapsible tree of JSON with copy and search.
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 whole product page from the Free blocks, in the order buyers decide, with a header that keeps the action in reach.
A 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.
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.
A 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.
One or more series over time, with hover readout and an optional band.
Resting size by price and time as a heatmap with an optional mid line.
Whether 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.
A 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.
A small indeterminate indicator in four shapes.
Swaps a loading placeholder for its content without a jump: the content fades in while the height eases once.
The 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.
Customer logos in a slow scrolling row.
Wraps one button or link so it leans toward the pointer as it comes near, up to 8px, and settles back when the pointer leaves.
Hero, feature and pricing sections for a landing page.
A slow scrolling row of content that pauses on hover.
A text field that turns @people and #channels into mentions.
File, 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.
One chat message with a role, optional name, status and actions.
A scrolling transcript that stays pinned to the newest message.
A measurement within a known range, with thresholds marked on the track and a word for whether it is fine.
A number with its context, change and a small trend line.
A 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.
A currency amount field with a currency picker and quick-add steps.
A modal whose surface morphs between views, like a menu becoming a confirmation.
A floating surface that grows out of the element that opened it.
Swap one asset for another across networks, with a quote.
Choose several values from a list, shown as a compact summary.
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 keyboard.
An email field with consent and success states.
A friendly 404 with suggestions and search.
The 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.
A list of notifications with read state and filters.
Stacked notifications that fan out on hover or focus.
A numeric field with steppers, limits, a suffix and optional drag-to-scrub.
A number that eases to its new value instead of jumping.
Bids and asks as depth bars around the spread.
A segmented field for one-time codes with paste support and status.
A few primary actions with the rest tucked behind an expander.
Where you are in a set of slides: the current dot stretches into a pill that fills while slides advance on their own.
A title with description, breadcrumbs and actions.
Dashboard, password reset and verification screens.
Page links with previous and next, sized for touch.