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.
Tailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.
A Tailwind workspace billing page with three plan cards and a highlighted Pro tier, a seat usage meter, and an invoice list with paid and void statuses.
Linked Tailwind blog post card with a 16:9 cover image, tag, relative date, title and a two line clamped excerpt. Hover and focus states cover the card.
A blog index page with a marketing nav, tag filter chips for all, design and engineering, a grid of post cards with excerpts and dates, and a footer.
Reveals its children as they scroll into view, rising out of a soft blur and settling into focus on a spring.
Wrap any card with a beam of light that travels around its border. A masked conic gradient in your accent colors, with pricing card demo, pauses for reduced motion.
A brand showcase page combining poster type, a typographic marquee, tilt cards, a text scramble, a grid reveal, a price morph and a magnetic CTA.
Breadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.
Ellipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.
A browser window frame with traffic lights, back and forward buttons, an address bar and optional tabs, wrapping your screenshot or any children.
CI pipeline view that shows each stage as a chip with success, running, failed or pending icons, joined by connectors. Status text is exposed to screen readers.
Floating Tailwind selection bar that appears once rows are selected, showing the count, your action buttons and a clear button. Sticks to the bottom edge.
CSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.
Shadcn compatible React button on Base UI with eight variants, nine sizes including icon sizes, a pressed state and render prop support for links.
Groups adjacent buttons into one segmented control in Tailwind, joining borders and rounding only the outer corners. Uses role group for toolbars.
React agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.
Month calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.
Tailwind callout box in info, success, warning or danger tones with an optional bold title. Uses the note role, which suits docs, forms and setup steps.
Two step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.
Shadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.
A card that tilts in 3D toward the pointer on springs, with an accent glare that follows the cursor. It stays flat when reduced motion is preferred.
A React careers page with a marketing nav, animated headline, open roles listing location and employment type with apply buttons, and a mega footer.
Scroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.
React shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals.
Case study card with the company name, a short headline and a large result metric, plus an optional up or down delta. Good for proof sections on landing pages.
Layout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.
A marketing changelog with a gradient masked headline, a subscribe CTA and a timeline of versions with highlight dots and bullet lists that slide in.
A React changelog timeline where each release slides in on scroll with version, date, title, an optional New, Fix or Premium badge and a bullet list.
A Tailwind changelog card listing releases with a monospace version, tag badge, date, title and summary, separated by hairline dividers.
Live React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.
Card wrapper for charts with a title, optional description and a minimum height body. Pairs with the area, bar and donut charts in a React dashboard.
Wrapping chart legend with small color swatches and labels. Pass colors per series or fall back to accent, success, warning and danger theme tokens.
Tooltip card for charts showing a title and label and value rows with tabular numbers. Drop it into any chart library's custom tooltip slot.
A fixed height AI chat page in React with a header, a scrollable thread of user and assistant messages, and a prompt input pinned to the bottom.
Scrolling chat thread for React that renders user, assistant and system messages as bubbles, auto scrolls to the newest one and uses a live log role.
Shadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.
Vertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.
Tailwind order summary card listing line items and prices, a divided total row and a full width Pay now button. Fits the side column of a checkout.
List of CI check runs with success, failed or running icons, monospaced job names and a status label. Looks like the checks section of a pull request.
Single select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.
Selectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding.
Inline citation button for AI answers, with an accent source number and label. Link it to a source panel or popover so users can check references.
A full client pitch page chaining a kinetic hero, metric ticker, live component rail, product mock, proof panel, before and after wipe, FAQ and quotes.
Flex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.
React code block with zero dependency syntax coloring, a language tag, optional filename and line numbers, and a copy button that confirms Copied.
Editor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.
Shadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.
Sidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.