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.
A macOS style dock for React: icons magnify under the pointer with spring physics and show a label. Real buttons or links, keyboard reachable and labelled.
A React docs landing page with an animated headline, docs search, get started and API buttons, a table of contents and scroll revealed code and callouts.
A Tailwind documentation page layout with a table of contents sidebar, prose with anchored headings, a copyable install command and an info callout.
Single value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.
A dot or grid background drawn as one SVG pattern, faded at the edges, with an optional accent glow that follows the pointer and lights the dots beneath it.
Tailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.
Bottom drawer that slides a sheet up from the screen edge with a titled header, close button and scrolling body, capped at 80% of the viewport height.
Shadcn compatible dropdown menu on Base UI with groups, labels, checkbox and radio items, submenus, shortcuts, separators and destructive items.
Small Tailwind due date chip with a calendar icon that switches to a red border and icon when overdue. Use it on task cards, tickets and boards.
Inline editable title that looks like a large heading but is a text input. Use it for document, page or project names; works controlled or uncontrolled.
Solid link button for email templates with a fixed height, padding and rounded corners. Uses an anchor so it survives email clients that strip buttons.
Content card for transactional emails with an optional title and body text, inset from the email edges. Use it for receipts, codes and highlights.
Email footer with your company address and Unsubscribe and Preferences links, centered on a muted background. Covers what marketing emails need at the end.
Simple email header band that shows your brand name on a muted background with a bottom border. Sits at the top of the email layout in React templates.
Email layout shell with a centered 560px column, rounded border and surface background. Compose it with the email header, cards, button and footer.
Inbox style preview frame showing the sender and subject above the rendered email body. Handy for template galleries and email settings screens.
A payment receipt email in a preview frame with a branded header, plan and tax line items, a bold total and a footer. A React starting point for billing mail.
A React welcome email template in a preview frame with a branded header, intro copy, a call to action button, a quick start card and a standard footer.
Compact emoji picker grid with a default set of twelve reactions or your own list, using listbox and option roles. Calls onSelect with the chosen emoji.
No results state for search that echoes the query in the title and suggests trying another query or clearing filters. Built on the empty state component.
Dashed empty state panel with an icon slot, title, description and an optional call to action button. Use it for first run screens and empty lists in React.
Empty table placeholder with a dashed border, a No data yet title, helper text and an optional button to create the first row. For React tables.
An empty workspace screen with a no projects empty state and new project action, plus follow up buttons to import from Git or invite teammates.
An engineering console with an environment switcher, build pipeline, and tabs for commits, CI checks with coverage, a trace waterfall and code review.
Uppercase environment badge for production, staging or development, with production outlined in red so live systems stand out in dev tools and consoles.
React segmented control for switching between Dev, Staging and Prod environments, reporting the selected value. Fits dashboards, API consoles and deploy tools.
React error state panel with an alert role, a title, explanation and an optional Try again button that calls your retry handler. For failed fetches.
A week and day event scheduler with overlap layout, an all-day row, a current time line and click to create.
Bordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content.
Settings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button.
A titled checkbox facet group for sidebar search filters in React. Each option can show a result count, and the selected values come back as an array.
An FAQ accordion where one answer opens at a time with an animated height transition. Triggers expose aria-expanded and motion is skipped when reduced.
An FAQ section built on an accessible accordion. Pass question and answer pairs and each one expands in place, with keyboard support and a readable max width.
An FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.
A four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.
A free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.
A feature flag settings list that pairs each flag key in monospace with a labelled switch. Drop it into admin or developer settings to toggle rollouts.
A settings row for flipping a feature flag on or off: flag name, optional description and a labeled switch, wired as a controlled React component.
A responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.
Thumbs up and thumbs down buttons for rating an answer or article. Uses aria-pressed, toggles off on a second click, and works controlled or uncontrolled.
A React drag and drop upload zone with accept and reject states, type and size checks, image previews, per file progress, retry and screen reader updates.
A stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.
A compact card that cites a source file with its name, monospace path and line range. Useful for code assistants, docs and AI answers that point into a repo.
A single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.
A code editor style file explorer with file icons, git status, a filter field and full tree keyboard support.
A filmstrip scrubber with a preview area, a row of selectable frame buttons using aria-pressed, and a range slider to scrub through frames quickly.
A wrapping Tailwind toolbar for tables and lists: a search input first, your own filter controls as children, and a Clear button when onClear is set.
A canvas grid of small squares whose brightness flickers at random behind your content, like a board of quiet signals.