Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Choose a date, several dates or a date range. Delivery date in a card with Cancel and Apply — usage example.
Edit a local date and time in one control. Demo call booked from the available times — usage example.
Present events in chronological order. Deployment history that grows and shrinks — usage example.
Present events in chronological order. Deployment history with status colors — usage example.
Show how one or several measures change over time or across ordered categories. Deploys per day with a dot on every point — usage example.
Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. Description cut after two lines — usage example.
Show a value as text and edit it in place in its field. Description that wraps at rest — usage example.
Show the trend of one or several measures in a small chart without axes. Desktop and mobile visitors on one scale, as area and fill — usage example.
Right-side drawer for the details of a record, with an optional edit form.
Base UI-backed modal task boundary.
Select or clear an independent option. Disabled and invalid checkboxes — usage example.
Choose a date from a button-triggered calendar. Disabled and invalid date pickers — usage example.
Choose one option with the browser's own select element, styled like the Select trigger. Disabled and invalid native selects — usage example.
Turn a setting on or off. Disabled and invalid switches — usage example.
Type free-text tags into a field that shows each one as a removable tag before the text. Disabled and invalid tags inputs — usage example.
Trigger an action with a text label, an icon, or both. Disabled and loading buttons — usage example.
Group related form fields under a shared legend. Disabled billing details — usage example.
Edit a local date and time in one control. Disabled, read-only and invalid date and time fields — usage example.
Edit a date with keyboard segments or a calendar. Disabled, read-only and invalid date fields — usage example.
Edit and select a start and end date. Disabled, read-only and invalid date ranges — usage example.
Enter a single line of text or a native input value. Disabled, read-only and invalid inputs — usage example.
Enter and edit multiline text. Disabled, read-only and invalid textareas — usage example.
Edit an hour and minute with segments or a selector. Disabled, read-only and invalid time fields — usage example.
Ask for a deliberate decision before continuing. Discard unsaved comment confirmation — usage example.
Attach text, icons or actions to an input surface. Discount code with a submit button and portal address with a copy segment — usage example.
Show how much of an operation has completed. Display circles with a label and a value — usage example.
Enter a single line of text or a native input value. Display name with character count — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Dividers that come and go with the space between rows — usage example.
Show a value as text and edit it in place in its field. Document name renamed from a button — usage example.
Show a drawing of a cloud, a box, a credit card or a few documents, with an optional glyph, to give an empty state its picture. Documents without and with a glyph — usage example.
Show how a total divides into shares as a donut or pie chart. Donuts with a total and a compact total in their holes — usage example.
Indicate that an operation is still in progress. Dot ring spinners with a caption — usage example.
Show which page of a carousel or a short sequence is current, as dots or line segments, and go to another page. Dots and lines at md and lg — usage example.
Show which page of a carousel or a short sequence is current, as dots or line segments, and go to another page. Dots for three slides — 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. Download badges for the App Store and Google Play — usage example.
Label a status, category, or count. Draft status badge — usage example.
Swipe-aware modal panel anchored to a viewport edge.
Open an edge panel with swipe dismissal. Drawers on each edge — usage example.
The Menu under DropdownMenu-prefixed part names.
Build application navigation with desktop collapse and a mobile sheet. Dual-tier sidebar — usage example.
Choose a date from a button-triggered calendar. Due date picker — usage example.
Choose a date, several dates or a date range. Due date with a date input and Today — usage example.
Choose a date, several dates or a date range. Due date with a Today button — usage example.
Show a value as text and edit it in place in its field. Search terms: inline edit, edit in place, click to edit, editable text, rename.
Open content in an edge panel. Edit profile sheet — usage example.
Show record details in a right-side drawer. Edit project drawer — usage example.
Group related form fields under a shared legend. Email digest frequency — usage example.
Type free-text tags into a field that shows each one as a removable tag before the text. Email invitations with a limit and validation — usage example.