Loading the library…
Every preview below is the real component, running. Open one to change the viewport, switch themes and read the source.
Forms / Refined
Language and region settings with a live preview of how dates, times, numbers and money will look before you save.
Forms / Refined
A sprint retro in a card: went well, to improve and actions as tabs, sticky notes with dot votes, sorted by votes.
Forms / Refined
A bug report people finish: title, severity, numbered steps, expected vs actual, and environment details attached.
Forms / Refined
Design review on a screen: tap anywhere to drop a numbered pin, write the note, then resolve pins as they are fixed.
Components / Refined
A tiny spreadsheet that really calculates: cell references, arithmetic, and SUM, AVG, MIN, MAX over ranges.
Components / Refined
A status-page incident: current state, affected services, timestamped updates, and a composer to post the next one.
Forms / Refined
Manage DNS for a domain: records as rows, an add form that validates per type, new records go from pending to live.
Components / Refined
A public roadmap: ideas under review, planned, in progress and shipped, with upvotes, sorting, and a suggestion box.
Components / Refined
Search a grid of line icons, tune size and stroke width live, and copy the selected icon as SVG or JSX.
Forms / Refined
Write a conventional commit: type, scope, a subject held to 50 characters, a wrapped body, and a breaking-change footer.
Forms / Refined
A weekly timesheet grid: hours per project per day, row and day totals, billable split and a target bar.
Components / Refined
Rank the options on your ballot, then step through an instant-runoff count as the lowest is eliminated each round.
Forms / Refined
A nested outliner: Enter adds a bullet, Tab indents, Shift+Tab outdents, and parents fold to hide their children.
Data / Refined
Edit assets and debts line by line and watch net worth, the debt ratio and each line’s share update.
Forms / Refined
Plan a week of shifts: tap cells to cycle Off, Early, Late and Night, with coverage gaps and hours per person.
Forms / Refined
Write a page title, description and slug and see how the search result will look, with width-based truncation.
Components / Refined
The “agent is working” row above a chat composer: four animated indicators, a shimmering label and a live timer.