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.
A password field with a show and hide toggle inside the input, an eye icon that swaps state and an accessible label. Supports sm, default and lg sizes in React.
A React password field with a four step strength meter and a live rule checklist. Announces the score politely and accepts your own scorer such as zxcvbn.
A saved card row showing the card brand, last four digits and expiry date in monospace, with an Edit button. Fits the payment methods area of billing.
A right side detail panel with a titled header, a close button and a scrollable body for previewing a record without leaving the list. Tailwind styled.
A small uppercase chip for access levels: admin, write or read. Use it in member lists, API key tables and sharing dialogs to show what a user or token can do.
A 403 style access card explaining that admin rights are needed, with Request access and Switch workspace buttons. Use it wherever a route is role gated.
A telephone number field with type tel, a numeric keypad on mobile, tel autocomplete, tabular digits and a default aria label. Styled like the React base input.
An SVG pie chart with leader line labels, a legend and slices that pull out on hover or focus.
A highlighted pinned note for chat channels and threads with a pin icon, a Pinned by author line and the message body on an accent tinted Tailwind background.
A pinned horizontal scroll gallery: the section sticks while vertical scrolling slides frames sideways. Falls back to a three column grid for reduced motion.
A pricing plan card with the plan name, a large price per period, a feature list and a full width call to action. A highlighted prop marks the recommended tier.
A Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.
A floating React panel anchored to a trigger, built on Base UI with side and align options, collision aware positioning, title and description parts.
A React motion landing page combining an aurora hero, an animated feature row, three tier pricing cards that rise into view and a glowing closing CTA.
A small colored dot for user status: online, away, busy or offline, exposed with role status and an aria label. Overlay it on avatars in chat and team lists.
A centered press or testimonial quote using figure, blockquote and figcaption, with a large quoted line and an uppercase source. Adds proof to landing pages.
A pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.
Pricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.
A full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.
A React pricing section with a monthly or yearly switch that rolls prices to the new value, a featured ink plan, and feature rows marked included or not.
A three column pricing section that renders a PlanCard for each tier you pass in, stacking on mobile. Mark one plan as highlighted to steer visitors toward it.
A Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards.
A radio group of priority chips, Low, Medium, High and Urgent, each with a colored dot and aria-checked state. Built for issue trackers, tasks and ticket forms.
A storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set.
A product launch page with a scroll progress rail, kinetic hero, device stack, sticky feature story, before and after wipe, stats, countdown and waitlist.
A mock product interface that auto cycles through inbox, pipeline and agents views with animated rows and progress bars. Click the sidebar to switch.
A React product tour with a clickable list of steps beside a detail panel that fades in for the active step, plus back and next buttons that stop at the ends.
An account profile form with a display name input, a bio textarea and a Save profile button, composed from FormField, Input and Textarea in React.
A linear progress bar built on Base UI with track, indicator, label and value parts, a default aria label and smooth width transitions. Matches shadcn progress.
A compact circular progress indicator drawn in SVG with a configurable size, an accent arc, an accessible label and the percentage in monospace below it.
A project detail header in React with a back link, page title and description, and a description list for owner, stack, license and registry.
A React projects list with a page header and new project button, and bordered rows that show each project name with an active or paused status badge.
An AI chat composer that grows with its content, sends on Enter, adds a newline on Shift Enter and has attach, toolbar and send controls. Built for React.
The AI prompt composer with an Attach file button and helper text above it, forwarding every PromptInput prop. For chat apps that accept documents or images.
A searchable list of saved prompts that filters by title, body and tag as you type and returns the chosen prompt through onSelect. Useful in React AI apps.
A Tailwind typography wrapper for raw HTML or MDX that styles headings, muted paragraphs, links, lists, inline code and blockquotes at a readable measure.
React publish bar with a draft, scheduled or published status badge, an autosave note, and Preview and Publish buttons wired to an onPublish callback.
A dependency free QR code rendered as crisp SVG, with error correction levels, a logo well and a one click SVG download.
React quantity stepper with minus and plus buttons around a tabular count. Clamps to min and max, disables at the limits, and works controlled or uncontrolled.
Filter query builder that chains field, operator and value clauses with AND. Add or remove rows, each with labelled selects, built in React and Tailwind.
Compact quota bar showing a label, used over max with locale formatting, and a thin accent progress track exposed as an ARIA progressbar for plan limits.
SVG radar chart that plots normalized 0 to 1 values on labelled axes over four concentric grid rings. Themed with currentColor and labelled for screen readers.
A radial bar chart of concentric progress rings with a legend, a rolling centre total and spring animated values.
Accessible radio group on Base UI with keyboard navigation, a springy checked dot, larger hit areas, and invalid and disabled states. A shadcn-style drop in.
Two-thumb range slider for picking a min and max, with value bubbles on both thumbs while dragging, optional marks, a formatter and an onValueCommitted hook.
Star rating input rendered as a radiogroup, with one labelled radio per star, a configurable max, disabled state, and controlled or uncontrolled value in React.
Row of emoji reaction pills with counts, where active reactions get an accent border and aria-pressed. Toggle callbacks suit comments and chat threads.
Message read receipt icon that shows a single check for sent, a double check for delivered, and an accent double check once read. Labelled for screen readers.