500+ free components, blocks and motion pieces for product UI: data tables, billing, settings, command palettes and AI chat. Built on Base UI, Tailwind CSS v4 and motion.
Swatch color picker with eight OKLCH presets, a ring on the selected swatch and listbox semantics. Works controlled or uncontrolled for theme or label colors.
Columns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.
Shadcn style combobox: a popover select with a filter input, check mark on the chosen item and an empty message. Built on Base UI popover for React.
A React operations dashboard with a KPI row for agents, jobs, failures and latency, plus a command palette dialog opened from the header action.
Command dialog that opens the command palette in a modal from a list of commands with labels and handlers. Wire it to a Cmd K shortcut in your React app.
Row for command menus with a label, an optional keyboard shortcut in a kbd tag and an active highlight state. Use it to build custom command lists.
Cmd K style command palette in a dialog with a search field that filters commands as you type, runs the chosen action and closes. Shows an empty state.
A React terminal styled waitlist card with a join --email prompt, a required email input and a join button that confirms, springing into view on scroll.
Comment box with a three row textarea and a Comment button that stays disabled until there is text. Submits the trimmed value and clears the field.
Threaded React comment list with initials avatars, author name, timestamp and body in bordered bubbles. Pairs with the comment composer.
A two column React checkout page with an editable cart line item, a shipping address form, and an order summary with subtotal, tax, total and a pay button.
Git commit row for React with author avatar, commit message, relative time, a short SHA badge and a copy button for the hash. Fits deploy logs.
Plan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.
A React button that bursts confetti from itself on click, with gravity, drag and spin on a temporary canvas. No library, and skipped for reduced motion.
Destructive action confirm: a red trigger button opens a dialog with a title, warning text, Cancel and Confirm. Labels are configurable for deletes and resets.
Tailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.
Scrollable Tailwind console panel in monospace that prints log, warn and error lines with level labels. Uses a log role and is keyboard focusable.
A contact sales page with an animated headline, a case study card and press quote on one side, and a work email, company and message form on the other.
Responsive page container that centers content with side padding and a max width preset: sm, default, lg or full. The basic wrapper for Tailwind layouts.
Small toggle chip for picking context in AI prompts or filters, with an active accent state and hover styling. Passes through all native button props.
Right click context menu that opens at the cursor with menu items, including destructive items in red. Closes on selection or click outside, in React.
Rounded pill for showing attached context, such as files or pages in an AI prompt, with a truncated label and an optional remove button.
React chat history sidebar with a New chat button and a scrolling list of conversations showing title and relative time. Highlights the active chat.
Floating React cookie consent card fixed to the corner, with a short notice and Accept and Reject buttons. It is a labelled dialog for assistive tech.
React copy to clipboard button that writes a value, then swaps to a check icon and Copied label for a moment. Accepts every Button variant and size.
Monospaced ID chip that copies its value to the clipboard on click and shows a check when done. Good for API keys, order IDs and record UUIDs.
Promo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.
Test coverage bar with a label and percentage that turns green at 80, amber at 60 and red below. Exposed as a progressbar for screen readers.
Inline form to name and create an API key, with a labelled input and a Create key button that passes the name to your handler. Pairs with the key list.
Compact credit balance pill with a small label and a large tabular figure. Shows remaining credits or usage balance for AI and pay-as-you-go apps.
Luhn (mod 10) checksum, the check digit rule every major card number follows.
A closing CTA section with a large lit headline and an inline email form whose button animates from idle to sending to a success check. Async onSubmit.
Tailwind call to action banner with a heading, supporting text and a primary button that stacks on mobile and sits in a row on wider screens.
A call to action card in Tailwind with soft accent glow layers, a title, optional description, a magnetic get started button and an outline button.
Money input with a currency code prefix, decimal keypad on mobile and tabular numbers. Controlled via a string value to avoid rounding issues in React forms.
A panel whose accent radial spotlight follows the cursor, driven by Framer Motion values without re-renders. It shows a still surface for reduced motion.
Danger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.
A React dashboard home screen with a page header and new project action, a KPI row with deltas, a 30 day active users bar chart and an activity feed.
React data table with sortable columns, row selection, a floating bulk actions bar, hover row actions, sticky header, three densities and skeleton loading.
Date picker built on the native date input, styled to match the rest of your form fields. Returns ISO date strings and supports disabled and labelled states.
Start and end date range picker made from two labelled date inputs. Works controlled or uncontrolled and returns a from and to object for filters and reports.
Account deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.
Toggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.
Semantic dl, dt and dd list of label and value pairs in a responsive two column grid with dividers. Good for record details and summaries in Tailwind apps.
Wraps any React UI in a phone with notch, status bar and side buttons, or a browser window with a URL bar. Built from theme tokens for light and dark.
Three device frames labelled mobile, app and docs that spring into a fanned, rotated stack when scrolled into view. Works as a hero or feature visual.
Shadcn compatible modal dialog on Base UI with a blurred backdrop, enter and exit animation, close button, header, title, description and a footer bar.
React code diff viewer that tints added lines green and removed lines red with plus and minus gutters, context lines and an optional filename header.