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 stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.
A round primary button fixed to the bottom right corner of the viewport for the main action on a screen. Accepts every Button prop, including icons.
Return an error message, or nothing when valid. Runs on submit and after the first error.
A sticky marketing navbar that tucks into a floating pill after you scroll, with a hover highlight that glides between links and an animated mobile menu.
A multi column site footer with a brand block and titled link groups that reflow from one to five columns. A React and Tailwind footer for marketing sites.
A slim one line footer with the brand name on the left and a wrapping set of links in a labeled nav element. Fits app shells, docs and small landing pages.
A password reset request card with one email field and a full width Send reset email button, composed from AuthCard, FormField and Input in React.
A wrapper that pairs any input with its label, required marker, help text and an error message announced with role alert. Keeps React forms consistent.
A three step React form wizard with a stepper for basics, details and review, per step fields, and back and next buttons that become submit at the end.
A two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.
A funnel chart with stage bars laid out horizontally or vertically, conversion rates and drop-off between stages, an optional comparison series and bars that spring to new values when the data changes.
A conversion funnel drawn as labeled horizontal bars scaled to the largest step, with formatted counts per stage. Suited to signup and checkout analytics.
A project timeline with day and week scales, a today line, progress fills, dependency arrows, a sticky task column and focusable bars.
One row of a Gantt timeline: a task label beside a track with a bar placed by start and end values on a shared scale. Stack rows to build a React roadmap.
A semicircle SVG gauge that fills to a value against a max and prints the percentage in the center. Exposed as an image with an accessible label for dashboards.
A dotted globe drawn on a plain canvas, no WebGL, that turns on its own and spins under your finger.
A circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.
Headline text filled with a slowly drifting gradient built from your accent tokens. A real text node for SEO and screen readers, still for reduced motion.
A grid of labelled tiles that slide up in quick succession as the section scrolls into view. Pass any list of strings; it honors reduced motion.
A heading primitive that renders h1 through h6 with a matched type scale, tuned letter spacing and medium weight. Pick the level with the as prop in React.
A status dot and label for service health with operational, degraded and down states mapped to success, warning and danger colors. Made for status pages.
A square heatmap cell whose fill blends from a muted base to the accent color by an intensity from 0 to 1, with an aria label. Tile it for activity grids.
A centered landing page hero with an optional eyebrow, a large headline, supporting copy and up to two call to action buttons. A plain Tailwind starting point.
A React hero with slow drifting aurora gradient blobs behind an eyebrow, headline, description and two action buttons that fade up in sequence.
A Tailwind hero section with a large headline above a bento grid of product tiles for AI, billing, auth and admin that fade up with a stagger on load.
A React pitch hero where headline words slide up from masks in sequence, followed by a lede, showcase and gallery buttons, and a row of proof stats.
A two column editorial hero in Tailwind with a masked two line headline and lede on the left and an animated device frame stack on the right.
A dark hero on a layered radial gradient mesh with a scale in headline, supporting copy and high contrast launch and docs buttons for launch pages.
A kinetic type hero where each headline line slides up from a mask with staggered timing and the last line is accented. Pass your own lines and copy.
A hero headline above an endlessly scrolling marquee of brand names for social proof. The loop stops when reduced motion is requested by the user.
A poster scale typography hero in React whose three headline lines rise from masks in turn, with an eyebrow, supporting copy and a magnetic CTA.
A split hero with headline and copy on the left and a product card on the right whose bar chart grows into place on load. Suits launch and docs homes.
A launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.
A centered hero whose headline cycles through rotating words such as dashboards and AI apps with a slide transition. Rotation pauses for reduced motion.
A lightweight horizontal bar chart where each row shows a label, a rounded bar scaled to the largest value and the number. No chart library, just Tailwind.
A horizontally scrolling rail of tagged product cards that slide in and lift on hover. The rail is a focusable, labelled region for keyboard scrolling.
A card that appears below a trigger on mouse hover to preview extra detail such as a user profile or link summary. A light take on the shadcn hover card.
Text that decodes itself: every character cycles through random glyphs and locks into place from left to right.
A square React button for icon only actions in small, default and large sizes with every Button variant. Its aria-label prop is required, so it is always named.
A sphere of icons that turns slowly in 3D, scales and fades with depth, and can be dragged to spin with inertia.
Left edge in source pixels, measured on the image after `rotation`.
A responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.
A clickable image thumbnail that opens a full screen modal of the picture with a dimmed backdrop and a close button. Handy for screenshots and product shots.
A single image picker that starts as a drag and drop zone, then swaps to a large preview with a remove button. Returns an object URL and the File in React.
A top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.
A Tailwind inbox panel listing messages with sender, preview line and timestamp, a New badge on unread items, and a mark all read action in the header.
A full width Tailwind status bar announcing an outage with minor, major and critical severity colors, the incident title and a link to your status page.
Load the next page when a sentinel scrolls into view, with a loading row, an end of list message and a Load more button as the accessible fallback.