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.
A password input with a show and hide control.
A new-password field that shows a strength meter and the rules it meets.
A phone number field with a country picker, formatting and validity.
Items 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.
Plans side by side with prices and feature lists.
Equal 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.
A small panel anchored to a trigger for quick settings or details.
Outcomes with probabilities and a way to take a position.
A 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.
A rail of ticks that previews each section on hover and jumps to it.
A price history that fans out into a forecast range.
Pricing worked out from the buyer's own numbers: enter seats and each plan shows its total and why it fits.
A 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.
A 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.
A measured bar for work with a known size, such as an upload.
A button that fills with determinate progress while its work runs, writes the percentage, and settles on a check.
Determinate progress in a ring that eases to each value, draws a check when done and a cross when it fails.
A folder card that opens to show its contents.
A message box with attachments, suggestions, commands and a stop button.
Logos set as type, a case study led by one number, press with outlet and date, and live figures with their source.
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.
Pull a list down to refresh it, with a button for everyone else.
Four to seven categories as concentric arcs that fill toward the largest one. Sorting moves each arc to its new ring.
A native radio for choosing exactly one option from a short group.
Large selectable cards for a choice that needs a title and a description.
A range filter over the shape of the data: bars outside the range dim as you drag, and the count in range is written out.
A two-handle slider for choosing a range of values.
A 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.
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 ratings it comes from.
Emoji 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.
Where 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.
Long 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.
Two panels separated by a draggable, keyboard-operable divider.
The outcome of an operation as a mark that draws itself once: a check, a cross, an exclamation, or a turning arc only while pending.
A month calendar coloured by daily return, with a compounded total.
A small editor with bold, italic, lists and links, returning HTML.
Stacked distributions that overlap for easy comparison.
A 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.
A 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.
Two 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.
A 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.
A labelled, keyboard-focusable scroll region with a quiet scrollbar.
The 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.
Tools for effects that follow scroll position, such as progress and reveals.
A scroll area whose edges fade only where there is more to see, easing in and out as you reach either end.
An outline that follows your reading: a marker glides to the section in view, and choosing a link scrolls there and moves focus into it.
Sections that change as you scroll.
A history down the page: the line fills as you scroll and each entry lights and settles as the line reaches it.