Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Choose one option from a related set. Controlled radio group with a disabled option — usage example.
Submit related fields and display validation feedback. Controlled reset — usage example.
Select a named color or image from an application-owned palette. Controlled selection — usage example.
Choose from a fixed set of options without text filtering. Controlled selection — usage example.
Switch between associated content panels. Controlled selection — usage example.
Compose a sidebar, header, and scrolling application content. Controlled sidebar state — usage example.
Turn a setting on or off. Controlled switch — usage example.
Switch between light and dark mode with an animated sun and moon toggle. Controlled theme toggle with layered icons — usage example.
Edit and select a start and end date. Controlled trip dates — usage example.
Suggest completions while allowing free text. Controlled value and clear — usage example.
Search and choose from known options. Controlled value and clear — usage example.
Choose one item from a visible list. Controlled workspace list — usage example.
Show how one or several measures change over time or across ordered categories. Conversion rate by channel in percent — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Copyable API request — usage example.
Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Search terms: copy to clipboard, copyable, copy link, copy URL.
Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Copy link as a quiet text action and as an outline Button — usage example.
Search and choose from known options. Country picker with search — usage example.
Group related content and actions on a surface. Create project card — usage example.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. Search terms: payment method, card preview, bank card, billing.
Show record details in a right-side drawer. Customer details from a list — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Customers gained and lost by month — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Customers gained and lost, stacked around 0 — usage example.
Show slides one at a time and move between them with arrows, dots, the arrow keys or a swipe. Customer stories with dots on the slides — usage example.
Show the current location within a navigation hierarchy. Custom separator — usage example.
Edit an hour and minute with segments or a selector. Daily summary time — usage example.
Responsive application frame with a sidebar, a header and scrolling content. Search terms: sticky header.
Show the details of one record as label and value rows, side by side or stacked. Search terms: description list, detail list, key value, properties, dl.
Choose one option with the browser's own select element, styled like the Select trigger. Data region native select in a form — usage example.
Connect a control with its label, help and validation. Data region select — usage example.
Choose from a fixed set of options without text filtering. Data region select with groups — usage example.
Edit a local date and time in one control. Date and time in a form — usage example.
Segmented, locale-aware date entry with optional Calendar action and native form serialization.
Edit a date with keyboard segments or a calendar. Date field in a form — usage example.
Edit a date with keyboard segments or a calendar. Date of birth field — usage example.
Button-triggered, locale-aware single-date picker with Calendar overlay.
Choose a date from a button-triggered calendar. Date picker trigger variants — usage example.
Choose a date, several dates or a date range. Date range — usage example.
Edit and select a start and end date. Date range in a form — usage example.
Segmented, locale-aware date-range picker with one Calendar action and two native form values.
Choose a date, several dates or a date range. Date range with shortcuts — usage example.
Combined locale-aware date and time picker with a calendar disclosure and one native form value.
Divide related sections with a horizontal or vertical line. Decorative separators between the rows of a list — usage example.
Label a status, category, or count. Default and pill badges — usage example.
Trigger an action with a text label, an icon, or both. Default button — usage example.
Open an edge panel with swipe dismissal. Default, inset and straight drawers — usage example.
Toggle a button between pressed and unpressed states. Default, outline and disabled toggles — usage example.
Ask for a deliberate decision before continuing. Delete account — usage example.
Ask for a deliberate decision before continuing. Delete project confirmation — usage example.