Animated React components, blocks and elements built with Tailwind CSS and Motion. 150+ free, open-source items install with the shadcn CLI; premium components are sold separately.
A single image split into a stacked deck of shape-clipped layers (rectangle, circle, hexagon, star, blob and more) that fans out on hover, with optional 3D cursor tilt, parallax, grayscale grading, and ambient idle rotation.
An image that unveils itself through a moving mask — a circle opening from where the pointer came in, falling blinds, a cascade of tiles, a diagonal wipe or a parting curtain — on hover or as it scrolls into view, settling from a slight zoom.
Masks an image into a shape (circle, squircle, arch, hexagon, flower, blob or diamond) that grows out from the centre as it scrolls into view and morphs smoothly into another shape on hover while the photo slowly zooms.
A product-style image viewer, a large main frame with prev/next arrows and an image counter, backed by a click-to-jump thumbnail strip and a reset-to-first button.
A two-pane inbox: Inbox, Starred and Archive folders with an unread count, search, rows with unread dots, labels and attachment icons, checkboxes for bulk mark-read and archive, a reading pane with attachments and a reply box, keyboard shortcuts and archive with undo. On phones the list and the message take turns.
A 'why shop with us' section: a scrolling ticker of store perks, a headline, and four incentive cards (shipping, returns, recycled packaging, support) with code-drawn illustrations that come alive on hover, a big stat, a short explanation and a link.
Walks an incident backwards from what people noticed to the change that caused it, with a confidence score, ideas ruled out and the evidence behind each step.
A calm site-wide status bar: a live dot, a clear severity, the latest update time, and a timeline that opens over the page without moving it.
A seamless scrolling text marquee with solid/gradient/outline text styles, a separator, double-row mode, edge fade, and pause-on-hover.
Click-to-edit text that turns into an auto-sizing input with save/cancel controls, validation, async save support and a shake on error.
A text button that looks like a link, for secondary actions: Forgot password?, View all, Undo, Remove, Read the docs. Neutral, muted, accent or danger, an underline that's always on, on hover or off, an arrow that nudges, and a ↗ for external links. Renders a link when you pass href, a button when you don't.
An inline writing assistant with tone selection, async rewrite integration, editable drafts and accept or discard actions.
A field-level validation message with error, warning, success and info states: it slides open under the field, crossfades when the text changes, shakes once when an error appears, and lives in a live region so screen readers announce it.
An accessible text input with outline, filled, and underline variants, label/helper/error text, a password show/hide toggle, and a focus ring, every color, size, and timing exposed as a prop.
Joins an input with text addons, icons, a select or a button into one field with one border and one focus ring: https:// and .com around a subdomain with a live availability tick, a price with a currency picker, a search with a shortcut, an invite with a send button.
A one-time-code input with individual animated cells, paste and autofill support, numeric or alphanumeric mode, masking, grouped cells, error shake and success states.
A short digest written by an AI agent: one sentence to remember, findings ranked by impact, the evidence behind each, and a way to turn it into a task.
A realistic Instagram post, avatar ring, swipeable multi-photo carousel, double-tap-to-like heart burst, like/comment/repost/share/save actions, and light/dark theme.
An integrations directory: search, category chips with counts, app cards with icon tiles, Popular and Connected badges, Connect and Disconnect buttons driven by your promise, a running connected count, and a request-an-integration card that doubles as the empty state.
An invite dialog that handles the real cases: paste a list and it becomes chips, bad addresses turn red, existing members and pending invites are caught, each person gets a role, a seat meter warns before you go over the plan, an optional message, a shareable invite link with expiry and reset, and a success list.
Read an invoice as the customer sees it: a printed page you can zoom, page through other invoices, download as PDF and mark paid, with reminders and an activity trail beside it.
An invoice list with status tabs that show their totals, an aging bar that splits what is outstanding by how late it is, checkboxes for sending reminders or marking invoices paid in bulk, overdue badges and a download button that builds a real PDF.
A drag-and-drop task board with a hand-rolled pointer-based drag engine, velocity tilt, edge autoscroll, ghost drop-position indicator, priority badges, avatar stacks, and light/dark theming.
A keyboard key cap for showing shortcuts, with raised, flat and outline styles, 3 sizes, automatic Mac or Windows symbols, key combinations and a live press animation.
A rotary dial for picking a value in a range, like a mixer control: drag up or down, scroll or use the keyboard, with a 270° progress ring and a sliding thumb, or a physical-looking knob with an indicator and ticks that light up as it turns.
An interactive context map linking documents, web pages and databases to an answer, with source search, selection and excerpts.
A dashboard overview grid: a large featured chart and KPI cards with counting numbers, change against the previous period (inverse for metrics like churn), hoverable sparklines or goal bars, a period switch, a compare toggle with dashed previous lines, and a Customize menu to show or hide metrics.
Offers a page in the visitor's own language, written in that language, with a picker for the others. It remembers the answer and only appears when it helps.
A language picker: a globe button whose name rolls to the new language, opening a searchable list of native names with codes and a check on the current one, or a segmented row of codes for two to four languages.
Roll out an AI feature in safe steps: a stepped curve of who has it, the checks each phase must pass, and controls to open it wider or roll it back.
A leaderboard with a medal podium for the top three, a ranked list with progress bars and up or down arrows against the previous period, period, metric and team switches that re-rank everyone with smooth motion, and your own row pinned at the bottom when you are further down.
A CRM lead detail screen: contact header with tags, status and owner, email / call actions, convert-to-deal inline form, a lead score ring with Hot / Warm / Cold and an explainable factor breakdown, a 14-day visits bar chart, and an activity timeline with note logging plus a details tab.
A one-time-payment offer card: licence tiers, a struck-through price, a live countdown, spots left, a pays-for-itself line and a guarantee, with a soft glow to make it feel like an event.
An image lightbox for any grid of photos: the thumbnail morphs into the full view, then arrows, keys and swipes step through, double-click zooms and pans, a swipe down closes, and a thumbnail strip tracks where you are.
A card of linear progress rows, plain ratio bars, file-upload rows with icons/subtitles/shimmer, milestone ticks, and an inline variant, with scroll-triggered fill animation.
A multi-series line/area chart, smooth Catmull-Rom curves, a highlighted zone band, a reference line, endpoint value badges, and a hover crosshair with per-series tooltips.
A realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with live counts, in light or dark theme.
Usage limits as bars of liquid: gentle waves on every surface, levels that spring to new values with a slosh, and a warning line near the top.
Text distorted through an animated SVG noise filter, 5 presets (liquid, melt, blob, ghost, crystal), cursor-proximity intensity, and a click burst ripple.
An always-open list for picking one or several options: a search box that filters as you type, sticky group headings, avatars and descriptions, a highlight that follows the pointer or keyboard, checks that draw in, and type-ahead to jump by name.
A framed group of rows for settings menus and navigation lists: icons, descriptions, count badges, a danger row for destructive actions, and in selectable mode an active highlight that slides from row to row with arrow-key navigation.
Named pointers show where each AI bot is working on a shared surface, with the area it's changing, a live list of what each one is doing, and a pause for any of them.
Watch an AI agent's log as it happens: lines stream in, level pills and a filter cut the noise, and scrolling up to read stops it jumping away.
A live market watchlist: prices tick every second and flash green or red when they move, change and percent update, intraday sparklines grow, and rows glide to their new places when the sort order changes.
A trusted-by logo grid with hairline cells where logos swap in place one at a time with a blur, a customer metric that slides up when a logo is hovered or focused, monochrome logos that light up, and pausing while people look.
An infinite scrolling row of client/partner logos with edge fade masks, grayscale-to-color hover reveal, pause-on-hover, and a constant speed regardless of logo count.
A ranked list of thin lollipops that reorders itself: switch period and the rows glide to their new places, with each one showing how far it climbed or fell.
Honest stock urgency for product pages and cards: badges that switch between In stock, Selling fast, Only n left (pulsing amber), Last one! (red with a shake) and Back on a date, plus a segmented stock meter that highlights the units you're about to take and drops when you add to cart.