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.
Switch on Base UI whose thumb stretches on press then springs across, with sm and default sizes, a loading spinner state and an optional clickable label row.
Table primitives for header, body, footer, row, head, cell and caption, wrapped in a horizontal scroll container. Same API as the shadcn Table, in Tailwind.
A sticky table of contents that spies on headings while you scroll, with a marker that glides to the active item and smooth scroll on click.
Table pagination footer showing Page X of Y with previous and next icon buttons that disable at the first and last page. Wire it to onPageChange in React.
Toolbar above a data table with a search input on the left and a right slot for filters, view toggles or export buttons. Wraps cleanly on narrow screens.
Tabs on Base UI with a raised thumb or a line underline that springs to the active tab, optional count badges, vertical orientation and roving keyboard focus.
React tags input that adds a chip on Enter or comma, skips duplicates, removes the last tag on Backspace and gives each chip a labelled remove button.
Checkout tax fields with country and a monospace VAT or EIN tax ID input in a two-column grid. Drop it into billing address forms for business customers.
Team member row with an initials avatar, name, email and a role badge, truncating cleanly in narrow lists. Built for team pages and member management in React.
An animated terminal window that types each command and prints its output line by line, with a blinking cursor and a replay button.
Terminal window frame with traffic light dots, a title bar and a monospace body for commands and output. A Tailwind block for install steps, CLI docs and demos.
Testimonial card with a quote, avatar with initials fallback, name and role, using semantic figure and blockquote markup. Built in Tailwind for landing pages.
A React testimonial carousel that auto advances every few seconds with slide transitions, dot indicators using aria-current, and prev and next buttons.
Text paragraph primitive with muted, subtle and mono variants on top of your base type styles. Keeps secondary copy and inline technical text consistent.
Multiline textarea with a 96px minimum height, comfortable line height, hairline border, focus ring and subtle placeholder. A shadcn-compatible Textarea.
A paragraph that lights up word by word as it scrolls through the viewport, from muted to full ink, using Motion scroll progress. Still text for reduced motion.
A text effect that scrambles random glyphs and resolves to the final string letter by letter when it scrolls into view. Its aria-label keeps the real text.
Light, dark and system theme picker as a segmented radiogroup that toggles the dark class on the root element for Tailwind dark mode and reports it to onChange.
React Thinking panel with a chevron header and aria-expanded that reveals the model's intermediate reasoning in muted text. Collapsed by default in chat.
A card that tilts toward the pointer in 3D, with a sliding glare and parallax children, and springs flat when the pointer leaves.
Tailwind vertical timeline with a hairline rail, a dot per event, titles, optional descriptions and right-aligned timestamps for activity feeds and changelogs.
React time picker built on the native time input, styled to match the other inputs, with a controlled value, onChange, disabled state and an aria-label.
Toast notifications with a toast() API for success, error, warning and promise states. The Toaster stacks cards, fans them out on hover and pauses timers.
Table of contents nav with anchor links indented by heading level and a highlighted active item. Pair it with scroll tracking for docs and long articles.
Two-state toggle button on Base UI with sm, default and lg sizes and a pressed style. A shadcn-compatible Toggle for toolbar actions like bold or mute in React.
Toggle group on Base UI that wraps Toggle buttons for single or multiple selection with shared keyboard navigation. Use it for text formatting or view modes.
LLM token usage meter showing tokens used against a monthly limit, a labelled progress bar and a percent of budget note with the reset date. Useful in AI apps.
Agent tool call card showing the tool name, argument preview, duration and a running, done or failed status chip, with collapsible monospace output below.
Compact collapsed tool call row with a rotating chevron and monospace tool name that expands to show its details. Keeps agent traces tidy inside chat threads.
Tool result panel with the tool name, a success, error or running status badge and the output shown in a JSON code block. Built in React for AI agent UIs.
React tooltip on Base UI with a provider for delay, a trigger, and content that positions on any side with an arrow and portal. Drop-in shadcn Tooltip API.
App top bar that is 56px tall with a title or custom left content and a right slot for actions, avatars or search. Sits above the main content in dashboards.
React trace waterfall that draws each span as a bar offset by start time and scaled by duration, indented by depth with a millisecond label for observability.
A vertical beam beside long content that grows as you scroll, with a glowing tip and a node that lights for each entry.
A squarified SVG treemap with one level of grouping, labels that hide in small cells, hover and keyboard focus with a value tooltip, and a hidden data table.
Nested tree view with expandable nodes, rotating chevrons, depth indentation and ARIA tree roles. Suited to file explorers and nested category lists in React.
Trial banner with a days left headline, a short note on what stays unlocked and an Upgrade button, on an accent tinted strip. Built for SaaS billing nudges.
Two-factor setup card with a QR code area, a one-time code input and a Verify and enable button, guiding users through linking an authenticator app in React.
Two-factor verification screen with a one-time password input and a full-width Verify button inside an auth card. Use it as the second step after sign in.
Tailwind typing indicator with three pulsing dots in a rounded pill, staggered by 120ms, with role status and a Typing label. Shows someone is replying in chat.
A React typewriter that types a phrase, holds, deletes and moves on, with a blinking accent caret. Starts in view and gives screen readers the plain text.
A large type Tailwind marquee that loops phrases horizontally in an endless scroll. Pass a phrases array; the loop stops for users who prefer reduced motion.
Upgrade prompt card with a title, a short description of what the paid plan unlocks and an Upgrade button. Place it where a free user hits a gated feature.
Status page uptime bar with one cell per day over 90 days, green when operational and red on degraded days, and the uptime percentage above. Built in Tailwind.
Usage breakdown listing several metered items, each with its label, used over limit and a thin accent bar. Use it on billing pages to show where plan limits go.
Single usage meter with a label, used over limit count and a Progress bar linked by aria-labelledby. Handy for API calls, storage or seats on billing pages.
React user chip showing a small avatar with initials fallback and the person's name, plus an optional remove button. Good for assignees, mentions and pickers.
A Tailwind user detail header with a back link to users, an avatar beside the name in the title, a role and email line, and a team member row with role.