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.
Collapsible AI reasoning block, folded by default. The title shimmers while the model is thinking, then reads Thought for Ns, with an animated height reveal.
Monospace payment receipt card with an order id, itemized amounts in tabular numerals and a bold total row. Built with Tailwind for checkout and billing pages.
Footer bar for AI answers with a Not quite right prompt, a Regenerate button with a refresh icon, and an optional Edit prompt action when onEdit is set.
Deployment region picker with selectable cards for each region and its latency in milliseconds. Uses radio semantics and an accent tint for the chosen one.
React relative timestamp that renders just now, 5m ago, 3h ago or 2d ago inside a semantic time element, with the full local date shown as a hover title.
A React report builder layout with an export action, a date range picker and a chart card for the selected metrics. A base for custom reporting screens.
Reset password card with new password and confirm password fields and a full-width Update password button, built from AuthCard, FormField and Input in React.
Split panes with draggable, keyboard operable handles, min and max sizes, snap to collapse and nested groups in either direction.
Responsive grid of quota cards, one per resource, each with a labelled usage bar showing used over max. Useful for infra limits like builds, storage and seats.
A retro perspective grid floor that recedes to a glowing horizon and scrolls slowly toward you.
Error block that pairs a danger inline alert with a Try again button and an onRetry callback. Defaults to a request failed message you can override in React.
Code review request card with a Review requested badge, pull request title, repo name, author avatar, and Review and View diff buttons for developer dashboards.
Formatting toolbar with bold and italic toggles, link, bullet and numbered list buttons, and a divider. Uses role toolbar with labelled icon toggles in React.
Concentric rings behind your content with a soft pulse that travels outward ring by ring, like a sonar ping.
Role and permission matrix with roles as columns and permissions as rows, each cell a labelled checkbox. Scrolls sideways on small screens, styled in Tailwind.
Team role picker built on the radio group, offering Owner, Admin and Member options with linked labels. Drop it into invite dialogs and member settings forms.
Row selection checkbox for data tables with checked and indeterminate states and a default Select row label. Pairs with a header checkbox for select all.
A full React SaaS landing template with an aurora hero, logo wall, counting stats, animated features, pricing cards, a testimonial carousel, FAQ and CTA.
A full SaaS marketing page stacking a kinetic pitch hero, moving logo wall, feature bento, free versus premium compare, testimonials and a magnetic CTA.
An SVG sankey diagram that lays nodes out in columns computed from the links, draws curved ribbons, labels nodes with values, highlights a node's flows on hover or focus, and includes a hidden table.
Saved views list for filters, rendered as a listbox of named views with item counts and a highlighted active view. Works controlled or uncontrolled in React.
API schema field row with a monospace field name, a required badge, the type and a description, in three columns on desktop for docs and reference pages.
A scratch card: a foil you rub away with the pointer or a finger to reveal what is underneath, which clears itself once enough is gone.
Custom scroll area on Base UI with a thin rounded thumb, vertical or horizontal scrollbars and a focus ring on the viewport. A shadcn-compatible ScrollArea.
A scroll story of three chapters that slide in as you scroll, with a sticky progress bar that fills with scroll position across the whole section.
Reading progress as a thin bar that fills along the top edge and a ring with the percent inside, for the page or any scrollable element.
A React reading progress bar that fills with page scroll on a spring, with section labels such as intro, product, proof and pricing shown beneath it.
A React wrapper that slides its children up into place once they scroll into view, with configurable offset and delay. Renders still for reduced motion.
A scrollytelling section: steps scroll on one side while a pinned visual swaps as each reaches mid screen and a progress rail fills. Inline on mobile.
Search input with a leading search icon and a clear button that appears once there is text. Comes in sm, default and lg sizes, controlled or uncontrolled.
A search results panel with a query input, result count and a list of hits, each showing a monospace item name, a tier badge and a one line summary.
Search field with a results list below it showing titles and optional subtitles, plus a No results state. Emits onSearch as you type so you can filter in React.
Team seat manager card showing seats used out of the plan, an Invite button, and a member list with name, email and role badge. Built in React for billing.
Masked secret field for API keys with an eye toggle to reveal or hide the value and a copy button for the full key. Monospace, compact, built with Tailwind.
Tailwind section header with a title, optional muted description and a right-aligned actions slot that wraps on narrow screens. Use it above cards and tables.
Segmented control with a raised thumb that springs between options, arrow, Home and End key support, icons, badges, three sizes and reduced motion support.
Select dropdown on Base UI with a trigger in three sizes, an animated popup, groups, labels, separators, a check indicator and scroll arrows. Shadcn-compatible.
Hairline separator on Base UI that draws a 1px rule horizontally or vertically, stretching to fill its container. A drop-in shadcn Separator for React layouts.
500 error state card with a danger outline, a short explanation, and Retry and Copy request id buttons so users can recover or reach support with context.
Active sessions list showing each device and location, marking the current device and giving other sessions a Revoke button. A React account security block.
Settings page layout with a 200px side nav column and a content area, plus a SettingsSection for titled groups divided by hairlines. Tailwind grid based.
A React settings page combining a profile form, theme picker, notification preferences and a danger zone for destructive actions under one header.
Slide-out sheet from the left, right, top or bottom with a backdrop, a titled header, a close button and a scrollable body, rendered as a modal dialog in React.
A React call to action with a slow band of light sweeping across it, a lit top edge and a press state. Ink or accent tone, renders as a button or a link.
A card whose border is a band of coloured light sweeping around it, masked to the border ring so the content is untouched.
Shipping address form with full name, street address, city and postal code fields, each with the right autocomplete attribute for browser autofill at checkout.
Keyboard shortcut cheat sheet listing actions next to their key combinations rendered as Kbd keycaps. Pass your own rows or use the default command palette set.
App sidebar shell with a collapsed icon-only width and SidebarNavItem buttons that show icons, truncated labels and an active state. Built with Tailwind.