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 button that's pulled toward the pointer as it comes near, with its label drifting a little further for depth, a fill that sweeps in from the side you entered, and a springy wobble back into place when you move away.
A field of iron filings that line up around a magnet you move: hundreds of short strokes swing round to follow a real dipole field, curving into the classic loops, glowing warm on the north side and cool on the south, and a click flips the poles.
A live delivery map for a dashboard: a drawn city with river, parks and roads, drivers moving along dashed routes that fill in as they go, stops that tick off, a sidebar with ETAs and progress, filters for on-time and delayed, click to zoom to a driver with a stops card, drag to pan and zoom controls.
A line chart you measure by dragging: the range gets a marching ants outline, the stats follow it, and the forecast part of the line marches too.
A document with anchored margin notes, section highlighting, contextual replies and open/resolved note workflows.
A formatted text field for phone numbers, dates, times, card numbers, ZIP codes or any pattern you define: separators fill themselves in, the rest of the template waits in faint ghost text, a thin bar tracks how much is filled, and a tick appears when it's complete.
A masonry layout for tiles of different heights: each tile drops into the shortest column while keeping left-to-right order, the column count follows the container's width, and tiles spring to their new places when it changes.
A masonry photo gallery with category tabs under a sliding hairline, photos that glide to their new columns when filtered, hover focus that dims the rest, scroll-in reveals and a captioned keyboard lightbox.
A Pinterest-style product wall of mixed-height photos with a collection card, customer quotes and a shipping note woven in, category filters that reflow the columns with animation, a Cozy / Compact density switch, wishlist hearts and a hover bar to add to cart.
A pill navigation bar whose menus open one shared panel: it morphs to each menu's size, slides the content in from the side you moved to, and holds columns of icon links plus a featured card, with hover intent and keyboard support.
A team directory with a rich profile card: pick someone from the list and see their status, local time, bio, stats and skills, follow them, message or copy their email, book a free slot for a meeting, and jump to their manager or teammates.
A floating-action-button popup that opens a color-matching memory game, 3 difficulty levels, a live timer/move counter, best-score tracking, subtle Web Audio sound effects, and a confetti win screen.
A flip-card memory matching game with animal emoji, three difficulty levels, a 3D flip animation, move/score tracking, and a win overlay.
A desktop-style app menubar with File/Edit/View-style dropdown menus, checkbox and radio items, submenus and full arrow-key navigation between and within menus.
A Facebook Messenger-style chat bubble widget with a typing simulation, quick replies, a notification popup, availability status, and a launch-in-Messenger send flow.
A meter for a value within a known range: bar, semicircle gauge or segmented variants with threshold zones, animated counting numbers and proper meter semantics.
Steer an AI agent while it works: watch each step arrive, send a quick nudge or your own note, and pause or stop without losing what's done.
A classic Minesweeper with three board sizes, flood-fill reveal, right-click flagging, a live mine counter and timer, and a confetti burst on a win.
A slide-in cart drawer with a store header and product row: adding a product bumps the bag count and opens the drawer, which shows a free-shipping progress bar, line items with steppers (the last one becomes a remove), a 'goes well with' upsell, an animated subtotal and checkout.
A store header with a cart icon that opens a dropdown cart: badge that bumps on add, free-shipping progress, line items with quantity steppers and remove with undo, subtotal, view cart and checkout; adding from the picks below opens it, highlights the new line and closes it again after a few seconds.
Compact rows of small blocks, one per item, filled by status: progress for several teams at once, with a filter to light up one status.
A phone-first filter sheet: a floating Filter & sort button with an active-count badge opens a bottom sheet you can drag down to close, with sort radios and collapsible category, price, colour, rating and in-stock sections that summarise their choice, plus a sticky footer with Clear and a live Show N results button.
A bottom navigation bar for phones: a pill slides behind the active tab and its icon bounces, with badge counts, an optional raised centre action, docked or floating styles, blurred glass and safe-area padding.
An accessible modal dialog with a blurred backdrop, focus trap, Escape and backdrop close, scroll lock, focus restore, 3 sizes and scale, slide-up and fade animations.
Show which AI model is answering and what happens when one fails: requests move down a chain of backups, with speed and cost changing as they do.
A model picker for an AI chat composer: a searchable menu grouped by provider with Auto, favorites, capability filters, New, Beta and locked Pro models, a detail panel with intelligence and speed meters, context and price, and a thinking effort switch that appears for reasoning models.
A bank transfer flow in three steps: pick the source account, a saved recipient or a new one with live IBAN formatting and a validity check, a big amount field with quick amounts and balance checks, instant vs standard speed with fees, reference and repeat; then a review summary with a press-and-hold send button and an animated success receipt.
An editable visual reference board with image, palette and typography tiles, drag reordering, keyboard-friendly move controls and reference editing.
A responsive pill navigation with a spring-driven indicator that moves and changes width between links, optional hover following, icons and controlled active state.
A perfectly aligned image grid with a centered glassmorphism overlay card, heading, subtitle and CTA button, with a staggered blur/slide/fade/scale entrance triggered on scroll into view.
A multi-row shop header with a dismissible announcement, utility links, search, account and bag actions, and a responsive collections panel.
A searchable multi-select that shows the chosen options as removable chips, with checkbox rows, select all, a selection limit, a +N overflow chip, an empty state and full keyboard navigation.
A four-step checkout in one card: a stepper whose connectors fill as you go, contact and address with country-aware postcode checks, delivery options, card payment with brand detection and a Luhn check, a review with edit links, then a placing-order state and a success screen, next to an order summary with tax.
A complete create-a-workspace wizard: a step rail with checks, a name field that writes the web address with a live availability check, plan cards with a monthly or annual switch, email invites, a review page with Edit links and a success screen. Each step validates before moving on and slides in from the direction you are going.
One set of items shown as a list grouped by status, a board with columns or a gallery of cards, and every card flies to its new place when you switch. Search, owner filters and sorting apply to all views, 1 / 2 / 3 switch views from the keyboard, and changing an item's status in the details panel moves it to its new group.
A responsive site header, centered nav links on desktop, a tablet CTA-only view, and a mobile hamburger dropdown panel, with active-page highlighting and optional sticky positioning.
A calm line with a bright pulse travelling along it, lighting up a row of heat cells as it passes. Three stats, a one-line readout and keyboard day inspection.
A neural-inspired loader with connected nodes, expanding pulse rings and a reduced-motion fallback.
A thin announcement bar that cycles through what's new, with a soft light that follows the pointer. It pauses while you read.
A newsletter sign-up popup with a first-order discount: a sample issue on paper, weekly or drops-only frequency, interest chips and an email field, then a stamped letter and a perforated coupon ticket with copy, apply to cart and an expiry countdown, plus a corner teaser if it's dismissed.
A newsletter signup that appears after a delay or part way down the page, with what readers get, how often, a checked email field and a clear thank-you.
A newsletter signup section: perks and reader proof on the left, a form card with email validation, weekly or monthly radio cards and topic chips on the right, a check-your-inbox screen with a resend cooldown, and a list of recent issues.
A focused suggestion card with contextual reasoning, async actions, set-aside and dismiss controls, undo and completion states.
A canvas background with animated film-grain noise, soft color blob gradients, 7 built-in themes (or fully custom colors), drifting blob animation, and a vignette.
A night sky shader with shimmering aurora curtains that ripple and pulse over a mountain ridge and twinkling stars; the curtains brighten and lean toward the pointer, and anything you place inside sits on top.
A bell button with an unread badge that opens a notification panel: All and Unread tabs, Today and Earlier groups, unread dots, mark as read on click, mark all as read, per-item remove and full keyboard support.
A notification settings screen: a matrix of events by channel with select-all columns, security alerts that can't be turned off, email frequency from instant to weekly, quiet hours with days, pause all with a banner, a test notification that slides in, and a save bar.
A numeric field with minus/plus steppers, press-and-hold auto repeat, min/max clamping, decimal precision, prefix and suffix, thousand separators and full keyboard support.