Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Label a status, category, or count. Secondary badges on a white and a tinted row — usage example.
Single- and multiple-selection popup with grouped, polymorphic and form-integrated controls.
Display, select, and remove a keyboard-navigable collection of tags. Selectable team tags — usage example.
Choose from a fixed set of options without text filtering. Select sizes — usage example.
Choose from a fixed set of options without text filtering. Select variants and disabled state — usage example.
Base UI separator with horizontal and vertical orientation.
Divide related sections with a horizontal or vertical line. Separator between a heading and content — usage example.
Submit related fields and display validation feedback. Server validation — usage example.
Compare one or several series across a handful of measures on spokes that share one value axis. Sessions by device and weekday — usage example.
Show how one or several measures change over time or across ordered categories. Sessions by device, one line each — usage example.
Edit a numeric value with typing, stepping or scrubbing. Session timeout in 5-minute steps — usage example.
Choose a numeric value or range by moving one or more thumbs. Session timeout in a settings form — usage example.
Sectioned settings surface with passive items and consumer-provided controls, tags and supporting content. Search terms: preferences, rows.
Expand or collapse related content sections. Settings sections with multiple open panels — usage example.
Show ordered steps and their progress. Setup steps with content — usage example.
Display a focused task in an overlay with a title and a clear close action. Share dialog opened from a menu — usage example.
Dialog-backed edge flyout for forms and save/cancel workflows.
Open content in an edge panel. Sheets on each side — usage example.
Group related form fields under a shared legend. Shipping address — usage example.
Display a key or keyboard shortcut. Shortcut hint in text — usage example.
Application navigation sidebar with desktop collapse and a mobile sheet.
Build application navigation with desktop collapse and a mobile sheet. Sidebar search, badges and nested links — usage example.
Sign in with Google, Facebook, Apple, X, Figma or Dribbble on a button that shows the provider's logo, in its brand color or neutral. Sign-in buttons for Google, Facebook and Apple — usage example.
Submit related fields and display validation feedback. Sign-in form — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Signups by month — usage example.
Show how one or several measures change over time or across ordered categories. Signups per day on a time axis — usage example.
Provider-free baseline styles and utilities.
Label a status, category, or count. Site statuses in a list and in a sentence — usage example.
Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Sizes, disabled and loading — usage example.
A glyph in a tinted circle, a solid or raised square or with pulsing rings, to lead a message, a dialog or an empty state. Sizes sm, md, lg and xl in the light and modern-neue variants — usage example.
Decorative loading placeholder with consumer-owned geometry.
Suggest completions while allowing free text. Skill suggestions with a result limit — usage example.
Scalar, range, discrete-label and form slider.
Choose a numeric value or range by moving one or more thumbs. Slider orientation and disabled state — usage example.
Choose a numeric value or range by moving one or more thumbs. Slider sizes — usage example.
Build application navigation with desktop collapse and a mobile sheet. Slim sidebar with the pages of the current section — usage example.
Turn a setting on or off. Slim switches — usage example.
Show a file or an image attached to a message or a draft, with its upload state. Small cards in the message field — usage example.
Sign in with Google, Facebook, Apple, X, Figma or Dribbble on a button that shows the provider's logo, in its brand color or neutral. Search terms: social login, continue with Apple, OAuth, SSO, login button.
Display structured data with keyboard navigation, optional sorting, and row selection. Sortable columns — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Sorting and shuffling a list — usage example.
Show the steps an agent took, such as its reasoning, tool calls and sources, as one-line rows that expand to their details. Sources with links that open in a new tab — usage example.
Show the trend of one or several measures in a small chart without axes. Search terms: spark chart, spark line, spark area, mini chart, inline chart, metric.
Show the trend of one or several measures in a small chart without axes. Sparklines in the color of a rise and a fall — usage example.
Indeterminate loading status with eight visual variants and reduced-motion behavior.
Indicate that an operation is still in progress. Spinner sizes — usage example.
Indicate that an operation is still in progress. Spinners with a caption — usage example.
Indicate that an operation is still in progress. Spinner variants — usage example.