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.
Accessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.
React onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.
React activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.
Compact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.
A full admin console with an impersonation banner, org switcher, KPI strip and tabs for users, SSO and IP allowlist, resource quotas and bulk user import.
An admin overview section with a heading and invite action, stat tiles with deltas for seats, MRR, NPS and churn, and a recent activity feed below.
Responsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.
User management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.
An agency portfolio page with a marketing navbar, animated headline, project cards that fade up in sequence as they scroll in, and a mega footer.
React timeline of an AI agent run: each tool step shows pending, running, done or error, reports its duration and folds out details. The header sums up the run.
Chat input for AI apps with a multiline textarea, Enter to send, suggestion chips, attach button, model picker and a stop button while a response streams.
Shadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.
A React analytics page with a KPI strip for installs, trials, conversions and seats, plus two chart cards showing 30 day bar trends side by side.
Light travels along curved paths from sources into a hub and out to a result, measured from the real DOM. Includes a Beam primitive to connect any two elements.
A row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.
A live feed where new items drop in at the top with a spring and older ones slide down. Ideal for activity streams, notifications and happening now sections.
Tabs with a sliding pill indicator and panels that fade in the direction of travel. Full WAI-ARIA tabs keyboard support with Arrow keys, Home and End.
A row of overlapping avatars where hovering or focusing one pops up a name and role card that leans and slides with the pointer.
Slim site-wide announcement bar for launches, promos or notices. Centered content, a polite status role for screen readers and an optional dismiss button.
A React API reference page with a sidebar nav, endpoints tagged by HTTP method, a copy base URL action and a curl request example in a code block.
React settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.
React request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.
Tailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.
Dependency free SVG area chart for React with a smoothed line, dashed grid, gradient fill and an optional highlighted point. Strokes stay crisp at any size.
Framed preview for AI generated artifacts such as code, documents or UI, with a title bar, copy button and optional expand action for a full view.
Shadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.
Assignee picker for tasks and tickets: a listbox of people with initials avatars, where the selected person is highlighted and choices report their id.
Compact Tailwind file chip with a paperclip icon, truncated filename and an optional remove button, for attachments in chat composers, emails and forms.
Minimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.
A microphone recorder with start, pause and stop, an elapsed timer, live waveform bars, playback with a progress bar and a download button.
Filter toolbar for audit logs combining a search field, actor filter chips for all, admins or system, and a date range picker in one wrapping row.
Single audit log line: actor avatar, actor name, muted action text and the affected target, with a relative timestamp underneath. Stacks into a trail.
Bordered audit trail in React that renders a list of actor, action, target and time records as stacked log entries. Useful for security and admin history pages.
Soft northern-lights curtains that drift and sway across the panel behind your content.
Centered Tailwind sign in card with a title, optional description, a slot for fields and providers, and a divided footer for sign up or reset links.
Text input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.
Shadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.
Shown under the name in the tooltip and overflow list.
React profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.
A skewed grid of hairline boxes behind your content where the box under the pointer lights up in colour and fades out behind it.
Small back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.
A back to top button that appears after scrolling, with a ring that fills as the reader progresses. Smooth scroll that respects reduced motion.
Shadcn style badge in seven variants: default, accent, secondary, destructive, outline, ghost and link. Renders as a span or any element, with icon support.
Inline notice banner in accent, warning or danger tones, with a status role, a slot for an action button and an optional dismiss icon on the right.
Lightweight React bar chart with rounded bars, dashed gridlines and labels. Hovering a bar dims the rest and shows its value; the peak is highlighted first.
A before and after comparison slider in React: drag the handle or use the labelled range input to wipe between two layouts across the full width.
A responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.
A React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.