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.
An inline React message box in neutral, success, warning and danger tones with a matching icon, an optional title and body text. Announced with role alert.
Click to edit table cell text: the value turns into an input on click, saves on Enter or blur and cancels on Escape. Built for editable React data grids.
A two line code diff showing the removed line in red with a minus and the added line in green with a plus, in monospace. Suits AI edit suggestions.
The base text input with sm, default and lg sizes and designed hover, focus, disabled, read only and invalid states. A drop in shadcn style input for React.
A text input with leading and trailing slots for icons, units or buttons, sharing one focus ring and invalid state across the field. Tailwind styled.
A recessed panel with a sunken background, rounded border and responsive padding for grouping secondary content, code samples or previews inside a card or page.
An app integration tile with the service name, a short description, a Connected or Available badge and a Connect or Manage button. Built in React.
A React SVG area chart with a crosshair that follows the pointer or arrow keys, showing the value and percent change against a dashed comparison line.
An investor update page with a gradient headline, flip counting stats, a highlights list, a product rail and a cursor spotlight panel for the ask.
A team invite panel with an email input, a Send button and badges for pending invitations. A starting point for workspace member management in SaaS settings.
An invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.
A bordered list of invoices showing number, date, amount and a paid, open or void status badge on each row. Fits the billing history in account settings.
An editor for IP and CIDR allowlists: a monospace list with a remove button per entry plus an input and Add button that skips duplicates. Built in React.
A compact issue tracker card with a monospace ticket key, status and priority badges, a title and an assignee line. Fits Linear or Jira style boards.
A monospace ticket identifier such as MD-241 that renders as plain text or, given an href, as a link with an accent hover underline. For issue lists.
A centered card for joining a team workspace with an invite code: heading, helper text, a monospace code input and a full width Join button. Tailwind styled.
A collapsible JSON tree with syntax colours, item counts, copy value and copy path on hover, search highlighting and full keyboard navigation.
A horizontally scrolling Kanban board built from column data: each column shows its title, a card count and stacked cards with a title and optional meta line.
A single Kanban lane with a title, an optional count badge and a slot for any cards you render as children. Compose several to build your own React task board.
A keyboard key cap for showing shortcuts, with a raised edge and room for icons, plus a KbdGroup wrapper for combos like Cmd K. Renders a semantic kbd element.
A keyboard shortcuts cheat sheet in a dialog, opened with the ? key or a trigger button, with search and the right modifier glyphs for the viewer's platform.
A responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.
A form label that dims and blocks pointer events when its peer input or group is disabled. Native label API, styled with Tailwind like the shadcn label.
A glowing strip light at the top of a dark panel that switches on and widens to light the headline beneath it.
A grid of language options exposed as an accessible listbox, with the selected language outlined in the accent color. Plug it into locale or profile settings.
A monospace millisecond badge that turns green under 100ms, amber under 400ms and red above. Useful for API monitors, model responses and status dashboards.
A React launch countdown showing days, hours, minutes and seconds to a target time, with digits that slide in on each tick and a waitlist call to action.
A WebGL shader background of drifting color silk with a soft cursor light and grain. It renders at half resolution, pauses offscreen and adapts to dark mode.
A page wide light source that follows the pointer and drifts when idle, driving shadows via CSS variables, plus a hairline, glass, metal and paper switcher.
A multi series SVG line chart with smooth curves, a dashed hairline grid and dots on the last point of each line, colored from chart tokens. No library.
A styled anchor with the accent color, underline on hover and a visible focus ring. Accepts every native anchor prop, so it works with Next.js or plain hrefs.
A rich link card with an optional 2:1 cover image, title, two line description and the URL, opening in a new tab. Good for chat messages, posts and bookmarks.
A flexible list row with leading and trailing slots around a truncated heading and description, split by hairline borders. Build settings or contact lists.
A rail of live component cards, including buttons, a badge, a switch and a destructive action, that rise into view with a quick stagger on scroll.
A multiplayer presence strip with overlapping colored avatars per collaborator and an editing now count. Suits docs, whiteboards and real time React editors.
A translucent overlay that covers its parent with a centered spinner and label while data loads, inheriting the parent radius and announced with role status.
A skeleton placeholder for data tables with configurable rows and columns, a header row and aria-busy so assistive tech knows content is loading.
A centered, wrapping row of customer or partner logos with names in muted text and an optional mark each. Adds social proof to a Tailwind landing page.
A logo wall that scrolls brand names in an endless marquee loop. Pass your own logos array; the motion stops for users who prefer reduced motion.
A Tailwind log viewer with a filter input and a scrollable monospace list of timestamped entries tagged info, warn or error. Focusable for keyboard scroll.
A passwordless sign in card with an email field and a Send link button that passes the address to onSend. Built from AuthCard, FormField and Input.
A magnetic button that drifts toward the cursor on a spring and snaps back on leave. Takes all Button props plus a strength value; static for reduced motion.
A markdown editor with a toolbar that wraps the selection, Cmd/Ctrl+B and I shortcuts, write, split and preview modes, a live preview rendered without innerHTML, and a word count.
A small React renderer for AI output that splits text into paragraphs on blank lines and turns fenced code blocks into scrollable monospace panels.
A complete Tailwind landing page assembled from a hero with two actions, a logo cloud, a stats strip, a three column feature grid and a closing CTA banner.
An infinitely scrolling Tailwind strip that loops its children horizontally, duplicated for a gapless cycle, and stops when users prefer reduced motion.
Two rows of testimonial quotes scrolling in opposite directions as looping React marquees. Pass quote and name pairs; motion stops for reduced motion.
A gradient text headline that wipes in from left to right with a clip path reveal when it scrolls into view. Accepts any children as the heading text.