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.
Formats a value with a mask, e.g. applyMask("(999) 999-9999", "5550102030") gives "(555) 010-2030".
A masonry layout for React that keeps source order: a CSS grid with measured row spans, so keyboard and screen reader order match the visual flow.
A Tailwind media library panel with an upload action and a two column grid of assets showing file name, size and a type badge for image, video, vector or doc.
A comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.
A desktop style app menubar built on Base UI: a row of triggers that each open a dropdown of items, with keyboard navigation between menus. shadcn compatible.
A React pull request merge panel with a success or warning callout for check status and a full width Merge button that stays disabled until checks pass.
A row of ghost icon buttons for chat replies: copy, retry, good response and bad response, each with an aria label and callback. Place it under AI messages.
A React chat message for user, assistant and system roles: user turns sit in a right aligned capsule, assistant replies read as prose, with a streaming cursor.
Meteor streaks with fading tails that fall diagonally behind your content at random intervals.
A horizontal gauge bar using role meter with aria value attributes, an optional label and a fill clamped to 100 percent. For storage, quota and usage limits.
A tiny percentage change indicator with an up arrow in green for gains and a down arrow in red for losses. Pair it with stat cards, KPI tiles and table cells.
A four cell metric board where each number counts up from zero with an eased tween when it enters the viewport, with optional suffixes like plus or %.
An iOS style action sheet that rises from the bottom with a list of actions, destructive items in red, a Cancel button and a backdrop that dismisses on tap.
A hamburger button that opens a right side navigation drawer as a modal dialog, with a close button and links that dismiss it on tap. Built in React.
A comparison table for AI models listing name, latency with a color coded badge, cost and a quality note per row. Helps users pick between LLM providers.
A dropdown for choosing an AI model, built on the Select component with an accessible trigger and a placeholder. Pass an array of models and read the chosen id.
A headline that cycles through phrases by melting each one into the next with a blur and crossfade on two stacked layers.
A React button that morphs into the panel it opens on a spring, blurring the label out and the form in. Ships with a feedback form and closes on Escape.
A price display with a monthly or yearly toggle where the old amount springs out and the new price springs in. A compact pricing interaction for plan cards.
A multi select dropdown in a popover with check marks on chosen items and removable chips below the trigger. Works controlled or uncontrolled in React.
A site navigation menu built on Base UI with triggers that open rich dropdown panels in a shared viewport, plus link items. Mirrors the shadcn navigation menu.
A sticky marketing header with a translucent blurred background, brand link, nav links that hide on mobile and Sign in and Get started buttons. Tailwind built.
A collapsible tree navigation built from nested node data, indented by depth with rotating chevrons on items that have children. Fits React docs sidebars.
An inline email capture form with a required email field and a Subscribe button that stack on mobile and sit side by side on wider screens. Tailwind styled.
A Jupyter style notebook cell with a Run button beside a code editor frame and an optional output panel below. Good for interactive docs and playgrounds.
A 404 state with the error code, a Page not found heading, a short explanation and Go home and Open gallery buttons, centered in a card. Built in React.
A React notification center card with a settings action and a stack of notification items showing title, body, relative time and an unread marker.
A bell with an unread count that opens a notification popover: All and Mentions tabs, unread dots, mark all read, type icons and an empty state. Built in React.
A single notification row with an unread dot and tint, a truncated title, relative time and a short body line. Stack it in React inboxes and activity feeds.
A notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages.
A numeric stepper with minus and plus buttons around a centered input that clamps to min and max and moves by a custom step. Works controlled or uncontrolled.
An odometer style animated number where each digit rolls on a spring and only changed digits move. Supports Intl formatting, trend tint and reduced motion.
A full width amber banner shown when the app loses its connection, with a wifi off icon, a note that changes will sync later and an optional Retry button.
An offline status card with a warning dot, a You are offline heading, a note on what still works and a Retry connection button. For PWA and sync apps.
A Get started card with a list of setup tasks that toggle between done and pending on click, showing a check box and a strikethrough on completed items.
A three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.
An animated onboarding card with a clickable segmented step bar, content that slides between steps, back and continue buttons, and a final CTA.
A three step React onboarding flow that walks new users through creating a workspace, inviting teammates and a done screen, with a stepper on top.
Icons orbit a central hub on hairline rings for integration sections. Set radius, speed and direction per ring; icons stay upright while they travel.
A cluster of logo chips orbiting a center badge in a slow continuous rotation, with labels counter rotating to stay upright. Pass center text and logos.
A checkout summary card listing line items such as subtotal, shipping and tax, then a separator and a bold total. Built with React for cart pages.
A collapsible organisation chart with connector lines, initials avatars, team colours, per node counts and arrow key navigation.
A popover switcher for moving between organizations or workspaces, showing the current name, a check on the active item and an optional plan label per org.
A React one time code input where one real input powers the slots, so paste, SMS autofill and screen readers work natively. Has groups, error shake and success.
A Tailwind page title block with an h1, an optional description and a wrapping slot for action buttons on the right, set off by a bottom border.
A pagination nav with Prev and Next buttons that disable at the edges and numbered page buttons that mark the current page with aria-current. Built in React.
A panel where the heading text and a glowing accent orb move at different speeds as you scroll, giving scroll linked parallax depth with transforms only.
A canvas particle field that drifts behind your content and parts around the pointer, or gathers toward it.