Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Open site sections from a row of links with dropdown panels. Navigation menu with two dropdown panels and a link — usage example.
Display a focused task in an overlay with a title and a clear close action. Nested team member dialogs — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Net cash flow by month — usage example.
Switch between associated content panels. Nine settings tabs in a narrow column — usage example.
Explain why a collection has no content and what to do next. No files uploaded — usage example.
Explain why a collection has no content and what to do next. No matching projects — usage example.
Show a line in a conversation that is not a message, such as a status, a note or a date. Notes about the model and the history — usage example.
Choose any number of related options. Notification channel checkboxes — usage example.
Display, select, and remove a keyboard-navigable collection of tags. Notification channels with checkboxes — usage example.
Choose one option from a related set. Notification frequency options — usage example.
Offer a compact list of actions and choices. Notification preferences menu — usage example.
Open contextual content next to a trigger. Notifications popover with a close button — usage example.
Base UI-backed numeric entry and stepping.
Edit a numeric value with typing, stepping or scrubbing. Number field, default, soft and disabled — usage example.
Edit a numeric value with typing, stepping or scrubbing. Number field sizes — usage example.
Scroll a chat thread that opens at the latest message, follows a streaming reply and leads back to the latest message. Older messages loaded above the thread — usage example.
Show ordered steps and their progress. Onboarding progress — usage example.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. Opaque horizontal and vertical strips — usage example.
Show or hide a single section of content. Order details with an icon trigger — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Orders by month with the three-month average as a line — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Orders by month with the total above each stack — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Orders over the last 6 or 12 months — usage example.
Show how one or several measures change over time or across ordered categories. Orders per hour in the four curves — usage example.
Segmented fixed-length input for one-time passwords, verification codes and recovery codes. Search terms: joined.
Edit and select a start and end date. Out-of-office dates — usage example.
Present an inline message with a title and optional actions. Page banners with the action at the end — usage example.
Present an inline message with a title and optional actions. Page banners with the link in the text — usage example.
Move between pages of a long list or table. Page footer with a line above the pagination — usage example.
Show which page of a carousel or a short sequence is current, as dots or line segments, and go to another page. Search terms: carousel dots, carousel indicator, pagination dots, slide indicator.
Move between pages of a long list or table. Page status between Previous and Next — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Page views by month — usage example.
Navigation between the pages of a long list or table, built from Button links.
Move between pages of a long list or table. Paging through ten pages — usage example.
Choose a hex color with a swatch, hue slider, and channel fields. Palette that ends in a custom color — usage example.
Open site sections from a row of links with dropdown panels. Panel with two labeled groups — usage example.
Choose any number of related options. Parent checkbox for project permissions — usage example.
Open contextual content next to a trigger. Password requirements hint — usage example.
Enter a single line of text or a native input value. Password with show and hide toggle — usage example.
Attach text, icons or actions to an input surface. Password with visibility toggle — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Payments with a sticky header — usage example.
Group related content and actions on a surface. Payouts with a divided header and footer — usage example.
Attach text, icons or actions to an input surface. Phone number and amount with select segments — usage example.
Show how a total divides into shares as a donut or pie chart. Search terms: ring, distribution.
Trigger an action with a text label, an icon, or both. Pill buttons — usage example.
Choose one option from a related set. Plan cards — usage example.
Anchored non-modal surface for contextual content.
Open contextual content next to a trigger. Popover alignment — usage example.
Anchored hover and focus preview for linked content.