Blocks

Product-ready animated React UI blocks built with Motion and Tailwind CSS, available as customizable copy-paste source.

22 components with live previews

Infinite Masonry

Live

Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.

Install
pnpm dlx shadcn@latest add @beui/infinite-masonry
Files (1)
  • components/motion/infinite-masonry.tsx

Notification Stack

Live

Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.

Install
pnpm dlx shadcn@latest add @beui/notification-stack
Files (1)
  • components/motion/notification-stack.tsx

Project Folder

Live

An interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then retraces the complete path when closed.

Install
pnpm dlx shadcn@latest add @beui/project-folder
Files (1)
  • components/motion/project-folder.tsx

Card Folder

Live

A landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam, with controlled open and card-detail visibility plus a separate overflow action.

Install
pnpm dlx shadcn@latest add @beui/card-folder
Files (1)
  • components/motion/card-folder.tsx

Fixtures

Live

Animated tournament fixtures in two styles: a knockout bracket that pages through rounds, and a wheel that wraps the same tree around the champion. Both read the same array of rounds, so one dataset draws either.

Install
pnpm dlx shadcn@latest add @beui/knockout-bracket
Files (1)
  • components/motion/knockout-bracket.tsx

Availability Scheduler

Live

Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.

Install
pnpm dlx shadcn@latest add @beui/availability-scheduler
Files (6)
  • components/motion/availability-scheduler/copy-menu.tsx
  • components/motion/availability-scheduler/day-row.tsx
  • components/motion/availability-scheduler/icon-button.tsx
  • components/motion/availability-scheduler/index.tsx
  • components/motion/availability-scheduler/time-select.tsx
  • components/motion/availability-scheduler/types.ts

Multi-chain Swap

Live

Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.

Install
pnpm dlx shadcn@latest add @beui/swap
Files (10)
  • components/motion/swap.tsx
  • components/motion/swap/constants.ts
  • components/motion/swap/controls.tsx
  • components/motion/swap/data.ts
  • components/motion/swap/field.tsx
  • components/motion/swap/quote-row.tsx
  • components/motion/swap/token-badges.tsx
  • components/motion/swap/token-picker.tsx
  • components/motion/swap/types.ts
  • components/motion/swap/utils.ts

Dynamic Island

Live

iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.

Install
pnpm dlx shadcn@latest add @beui/dynamic-island
Files (1)
  • components/motion/dynamic-island.tsx

Command Palette

Live

⌘K palette with fuzzy filter, spring-animated active row and glass surface.

Install
pnpm dlx shadcn@latest add @beui/command-palette
Files (1)
  • components/motion/command-palette.tsx

Morphing Search

Live

Search field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.

Install
pnpm dlx shadcn@latest add @beui/morphing-search
Files (1)
  • components/motion/morphing-search.tsx

Expandable Action Bar

Live

Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.

Install
pnpm dlx shadcn@latest add @beui/expandable-action-bar
Files (1)
  • components/motion/expandable-action-bar.tsx

Overflow Actions

Live

Connected pill rail for primary actions that springs open to reveal extra controls.

Install
pnpm dlx shadcn@latest add @beui/overflow-actions
Files (1)
  • components/motion/overflow-actions.tsx

Expandable Tabs

Live

Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.

Install
pnpm dlx shadcn@latest add @beui/expandable-tabs
Files (1)
  • components/motion/expandable-tabs.tsx

Morphing Tabs

Live

Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.

Install
pnpm dlx shadcn@latest add @beui/morphing-tabs
Files (1)
  • components/motion/morphing-tabs.tsx

Swipeable List

Live

Mobile-style list rows that swipe left or right to reveal contextual action buttons.

Install
pnpm dlx shadcn@latest add @beui/swipeable-list
Files (1)
  • components/motion/swipeable-list.tsx

File Upload

Live

Two file upload patterns: an attachment workspace for mixed files, links, audio and media, plus a progress queue with retry and removal.

Install
pnpm dlx shadcn@latest add @beui/file-upload
Files (1)
  • components/motion/file-upload.tsx

Prediction Market

Live

Animated market listing cards with outcome CTAs, probabilities and bookmarks, plus a trade ticket with buy/sell modes and rolling amount entry.

Install
pnpm dlx shadcn@latest add @beui/prediction-market
Files (1)
  • components/motion/prediction-market.tsx

Wallet Card

Live

Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions.

Install
pnpm dlx shadcn@latest add @beui/wallet-card
Files (10)
  • components/motion/wallet-card/account-avatar.tsx
  • components/motion/wallet-card/account-switcher.tsx
  • components/motion/wallet-card/actions.tsx
  • components/motion/wallet-card/balance-delta.tsx
  • components/motion/wallet-card/constants.ts
  • components/motion/wallet-card/copy-button.tsx
  • components/motion/wallet-card/index.tsx
  • components/motion/wallet-card/search-bar.tsx
  • components/motion/wallet-card/types.ts
  • components/motion/wallet-card/utils.ts

OTP Input

Live

One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.

Install
pnpm dlx shadcn@latest add @beui/otp-input
Files (1)
  • components/motion/otp-input.tsx

Sign Up Form

Live

Composed sign-up form that flags a field only once it is left, then clears the moment it is fixed, with a length-weighted strength meter, password reveal and an animated submit lifecycle.

Install
pnpm dlx shadcn@latest add @beui/signup-form
Files (1)
  • components/motion/signup-form.tsx

Bloom Menu

Live

A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.

Install
pnpm dlx shadcn@latest add @beui/bloom-menu
Files (1)
  • components/motion/bloom-menu.tsx

Feedback Widget

Live

Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.

Install
pnpm dlx shadcn@latest add @beui/feedback-widget
Files (1)
  • components/motion/feedback-widget.tsx

404 / Not Found

Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.

Collection component

Install
pnpm dlx shadcn@latest add @beui/not-found
Files (7)
  • components/motion/not-found/glitch.tsx
  • components/motion/not-found/index.tsx
  • components/motion/not-found/magnetic.tsx
  • components/motion/not-found/shared.tsx
  • components/motion/not-found/spotlight.tsx
  • components/motion/not-found/stacked.tsx
  • components/motion/not-found/terminal.tsx