Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Indicate that an operation is still in progress. Spinner with loading label — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Stacked visits that glide when the period changes — usage example.
Label a status, category, or count. Status badges with icons — usage example.
Edit and select a start and end date. Stay dates within the booking window — usage example.
Ordered workflow progress with read-only and native button items.
Show the steps an agent took, such as its reasoning, tool calls and sources, as one-line rows that expand to their details. Steps in each status — 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. Steps of a finished reply — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Steps that switch and resize — usage example.
Compose a sidebar, header, and scrolling application content. Sticky header — usage example.
Choose a numeric value or range by moving one or more thumbs. Storage slider with scale labels — usage example.
Measure a current value within a known range. Storage usage meter — usage example.
Show how a total divides into shares as a donut or pie chart. Storage use with an unfilled share — 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. Search terms: app store badge, store badge, download on the App Store, get it on Google Play, mobile app download.
Show the details of one record as label and value rows, side by side or stacked. Subscription details — usage example.
Compare one or several series across a handful of measures on spokes that share one value axis. Support tickets by weekday — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Support tickets opened and resolved by month — usage example.
Compare one or several series across a handful of measures on spokes that share one value axis. Survey scores this quarter and last, without a grid — usage example.
Base UI-backed on/off preference control.
Turn a setting on or off. Switch card — usage example.
Turn a setting on or off. Switch in a form — usage example.
Turn a setting on or off. Switch sizes — usage example.
Turn a setting on or off. Switch with description — usage example.
Turn a setting on or off. Switch with label — usage example.
React Aria table with composable rows and cells plus optional sorting, row or checkbox selection, captions and footers.
Display structured data with keyboard navigation, optional sorting, and row selection. Table in a CardFrame — usage example.
Reserve space while application content loads. Table rows placeholder — usage example.
Display tabular content, such as a report, in a native HTML table where each control in a cell keeps its own tab stop. Table sizes — usage example.
Switch between associated content panels. Tab list variants — usage example.
Keyboard-navigable single-selection content panels.
Switch between associated content panels. Tab sizes — usage example.
Switch between associated content panels. Tabs with icons — usage example.
React Aria tag collection with controlled or uncontrolled selection, accessible removal and focus recovery. Search terms: tags, labels.
Type free-text tags into a field that shows each one as a removable tag before the text. Search terms: tag input, chips input, keywords, email list, multi value input.
Type free-text tags into a field that shows each one as a removable tag before the text. Tags input sizes — usage example.
Display, select, and remove a keyboard-navigable collection of tags. Tag sizes — usage example.
Suggest completions while allowing free text. Tag suggestions in groups — usage example.
Open an edge panel with swipe dismissal. Task filters drawer — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Task list that adds and removes rows — usage example.
Display resources with status indicators, metadata and optional interactive rows. Tasks with icon indicators — usage example.
Label a status, category, or count. Team badges in the seven colors, as tints, pills with a dot and statuses — usage example.
Show a value as text and edit it in place in its field. Team identifier with a hint and a check — usage example.
Explain why a collection has no content and what to do next. Teammates either side of an invite icon — usage example.
Show a person, a team or an account as an avatar with a title and a subtitle beside it. Team members with their roles — usage example.
Choose from a fixed set of options without text filtering. Team multi-select — usage example.
Choose from a fixed set of options without text filtering. Team multi-select with member counts — usage example.
Search and choose from known options. Team multi-select with search — usage example.
Edit a numeric value with typing, stepping or scrubbing. Team seats in a form — usage example.
Edit the team profile and notification preferences, then save or reset the changes. Team settings — complete application example.