Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Enter a single line of text or a native input value. Email with a floating label — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Empty collection — usage example.
Explain why a collection has no content and what to do next. Empty project list with actions — usage example.
Empty application-state explanation with media and actions.
Explain why a collection has no content and what to do next. Empty states at lg, md and sm — 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. Every provider as an icon button in the brand, color and gray themes — usage example.
Link to your app on the App Store, Google Play, Galaxy Store or AppGallery with a badge that shows the store's mark and name, in black or as an outline. Every store, solid and outline — 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. Expanding arrow link and log out button — usage example.
Choose files in a field that shows their names and ends with an Upload button, and send them with a form. Expense form that requires a receipt — usage example.
Show temporary feedback with dismissible notifications. Export progress toast — usage example.
Compare one or several series across a handful of measures on spokes that share one value axis. Feature adoption by plan in percent — usage example.
Feature one offer or status in a sidebar or a panel, such as the storage a team has used, with its progress and a pair of link actions. Search terms: upgrade card, usage card, storage card, sidebar card, promo card.
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. Search terms: icon container, icon badge, status icon, pulse.
Open contextual content next to a trigger. Feedback form popover — usage example.
Base UI fieldset and legend primitives for semantic control groups, with a description the fieldset names in aria-describedby.
Open an edge panel with swipe dismissal. File actions drawer — usage example.
Choose files in a field that shows their names and ends with an Upload button, and send them with a form. Search terms: file upload, upload field, attachment, browse files.
Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. File names cut in a table column — usage example.
Show a file or an image attached to a message or a draft, with its upload state. Files in a row that scrolls — usage example.
A message field for chat and AI interfaces that sends on Enter and turns Send into Stop while a reply runs. Files that upload above the field — usage example.
Show or hide a single section of content. File tree with nested folders — usage example.
Show a file’s type as a document icon with its extension. Search terms: file icon, attachment, pdf.
Show a file’s type as a document icon with its extension. File type icons for common files — 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. Fill sweep button — 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. Fill sweep variants — 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. Fill that passes through — usage example.
Label a status, category, or count. Filter badges with remove buttons — usage example.
Responsive search, filter summary and action arrangement, with view tabs that open into a search field.
Connect a control with its label, help and validation. Floating label fields — usage example.
Base UI form root for validation, submission, reset, and server errors.
Add a short description to a control on hover or focus. Formatting buttons with grouped tooltips — usage example.
Group related pressed-state buttons. Formatting group with a separator — usage example.
Group related pressed-state buttons. Formatting options with multiple selection — usage example.
Toggle a button between pressed and unpressed states. Formatting toggles with icons — usage example.
Group related actions with directional keyboard navigation. Formatting toolbar — usage example.
Layered surface with headers, panels, descriptions and footers.
Group related content and actions on a surface. Framed card with a header action — usage example.
Group raised panels inside a shared frame. Frame with header, panel and footer — usage example.
Group raised panels inside a shared frame. Frame with separated panels — usage example.
Group raised panels inside a shared frame. Frame with stacked sections — usage example.
Expand or collapse related content sections. Frequently asked questions — usage example.
Open content in an edge panel. Fullscreen menu with a nested page — usage example.
Switch between associated content panels. Full-width tabs — usage example.
Choose a date, several dates or a date range. German calendar — usage example.
Every text of the kit in German, for the messages of the Locale Provider. Install it with @siteplane/locale and pass it as messages.
Trigger an action with a text label, an icon, or both. Glass buttons — usage example.
Group related content and actions on a surface. Glass card — usage example.
Show actions for an element on right-click or long press. Glass context menu — usage example.