@smoothui

A collection of 50+ animated React UI components and blocks built with Tailwind CSS v4, Motion (Framer Motion), and optionally GSAP. Focuses on microinteractions: smooth transitions, gesture feedback, and delightful hover/reveal effects. Categories include UI Components, Interactive Components, Layout Components, and Utility Components. Compatible with shadcn/ui, installable via shadcn CLI or a dedicated SmoothUI CLI. Supports dark/light mode; fully typed in TypeScript. Free (Vercel OSS). Use for: layering polished motion design onto a shadcn/ui project's interactive elements — buttons, modals, cards, text reveals — without building animations from scratch.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://smoothui.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://smoothui.dev/r/registry.json

bun bunx shadcn@latest add https://smoothui.dev/r/registry.json

fetch registry curl -s https://smoothui.dev/r/registry.json

Components

60 total

cta-1 ui

Centered CTA block with radial glow background

npx shadcn@latest add https://smoothui.dev/r/cta-1.json

cta-2 ui

Split layout CTA block with text and illustration

npx shadcn@latest add https://smoothui.dev/r/cta-2.json

cta-3 ui

Compact banner CTA block

npx shadcn@latest add https://smoothui.dev/r/cta-3.json

faq-1 ui

FAQ grid block with categorized tabs and icons

npx shadcn@latest add https://smoothui.dev/r/faq-1.json

faq-2 ui

FAQ accordion block with expandable questions

npx shadcn@latest add https://smoothui.dev/r/faq-2.json

faq-3 ui

Searchable FAQ section with filter animations

npx shadcn@latest add https://smoothui.dev/r/faq-3.json

faq-4 ui

Categorized FAQ section with tab navigation

npx shadcn@latest add https://smoothui.dev/r/faq-4.json

features-1 ui

Feature grid block with animated cards

npx shadcn@latest add https://smoothui.dev/r/features-1.json

features-2 ui

Bento grid features block with asymmetric layout

npx shadcn@latest add https://smoothui.dev/r/features-2.json

features-3 ui

Alternating features block with side-by-side layout

npx shadcn@latest add https://smoothui.dev/r/features-3.json

footer-1 ui

Simple footer block with links and social icons

npx shadcn@latest add https://smoothui.dev/r/footer-1.json

footer-2 ui

Complex footer block with newsletter and extended links

npx shadcn@latest add https://smoothui.dev/r/footer-2.json

footer-3 ui

Mega footer with newsletter and social links

npx shadcn@latest add https://smoothui.dev/r/footer-3.json

footer-4 ui

Minimal single-row footer

npx shadcn@latest add https://smoothui.dev/r/footer-4.json

header-1 ui

Modern header block with navigation and mobile menu

npx shadcn@latest add https://smoothui.dev/r/header-1.json

header-2 ui

Premium header block with gradient logo and smooth animations

npx shadcn@latest add https://smoothui.dev/r/header-2.json

header-3 ui

Premium header block with gradient logo and smooth animations

npx shadcn@latest add https://smoothui.dev/r/header-3.json

header-4 ui

Interactive 3D grid hero header inspired by rauno.me 2024

npx shadcn@latest add https://smoothui.dev/r/header-4.json

header-5 ui

Spotlight hero block with dark theme and gradient text

npx shadcn@latest add https://smoothui.dev/r/header-5.json

header-6 ui

Minimal hero block with clean typography

npx shadcn@latest add https://smoothui.dev/r/header-6.json

logo-cloud-1 ui

Simple logo cloud block with grid layout

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-1.json

logo-cloud-2 ui

Animated logo cloud block with infinite scroll

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-2.json

logo-cloud-3 ui

Infinite scrolling logo marquee

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-3.json

logo-cloud-4 ui

Interactive logo grid with hover effects

npx shadcn@latest add https://smoothui.dev/r/logo-cloud-4.json

pricing-1 ui

Simple pricing block with single plan

npx shadcn@latest add https://smoothui.dev/r/pricing-1.json

pricing-2 ui

Modern pricing block with three tiers

npx shadcn@latest add https://smoothui.dev/r/pricing-2.json

pricing-3 ui

Creative pricing block with two plans

npx shadcn@latest add https://smoothui.dev/r/pricing-3.json

shared ui

Shared components for SmoothUI blocks

npx shadcn@latest add https://smoothui.dev/r/shared.json

stats-1 ui

Grid stats section block with hover effects

npx shadcn@latest add https://smoothui.dev/r/stats-1.json

stats-2 ui

Cards stats section block with icons and trends

npx shadcn@latest add https://smoothui.dev/r/stats-2.json

team-1 ui

Grid team section block with hover effects

npx shadcn@latest add https://smoothui.dev/r/team-1.json

team-2 ui

Carousel team section block with auto-play

npx shadcn@latest add https://smoothui.dev/r/team-2.json

testimonials-1 ui

Simple testimonials block with auto-rotating cards

npx shadcn@latest add https://smoothui.dev/r/testimonials-1.json

testimonials-2 ui

Grid testimonials block with navigation arrows

npx shadcn@latest add https://smoothui.dev/r/testimonials-2.json

testimonials-3 ui

Star testimonials block with grid layout

npx shadcn@latest add https://smoothui.dev/r/testimonials-3.json

agent-avatar ui

Canvas-based generative pixel avatar for AI agents, unique per seed.

npx shadcn@latest add https://smoothui.dev/r/agent-avatar.json

ai-branch ui

An interactive AI branch component for displaying conversation flows.

npx shadcn@latest add https://smoothui.dev/r/ai-branch.json

ai-input ui

A AiInput component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/ai-input.json

animated-avatar-group ui

Stack of overlapping avatars with smooth expand/collapse animation

npx shadcn@latest add https://smoothui.dev/r/animated-avatar-group.json

animated-file-upload ui

Animated drag-and-drop file upload component

npx shadcn@latest add https://smoothui.dev/r/animated-file-upload.json

animated-input ui

A AnimatedInput component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-input.json

animated-o-t-p-input ui

A AnimatedOTPInput component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-o-t-p-input.json

animated-progress-bar ui

A AnimatedProgressBar component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-progress-bar.json

animated-stepper ui

Animated stepper/wizard component with step transitions

npx shadcn@latest add https://smoothui.dev/r/animated-stepper.json

animated-tabs ui

Animated tabs component with sliding indicator

npx shadcn@latest add https://smoothui.dev/r/animated-tabs.json

animated-tags ui

A AnimatedTags component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/animated-tags.json

animated-toggle ui

Animated toggle switch with morph and icon variants

npx shadcn@latest add https://smoothui.dev/r/animated-toggle.json

animated-tooltip ui

Spring-animated tooltip with multiple placement options

npx shadcn@latest add https://smoothui.dev/r/animated-tooltip.json

app-download-stack ui

A AppDownloadStack component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/app-download-stack.json

apple-invites ui

A AppleInvites component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/apple-invites.json

basic-accordion ui

A BasicAccordion component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-accordion.json

basic-dropdown ui

A BasicDropdown component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-dropdown.json

basic-modal ui

A BasicModal component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-modal.json

basic-toast ui

A BasicToast component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/basic-toast.json

book ui

A 3D CSS book component with perspective transforms and hover animation

npx shadcn@latest add https://smoothui.dev/r/book.json

breadcrumb ui

Animated breadcrumb navigation with stagger-in animation

npx shadcn@latest add https://smoothui.dev/r/breadcrumb.json

button-copy ui

A ButtonCopy component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/button-copy.json

checkbox ui

An animated Checkbox component for SmoothUI with checkmark and indeterminate state animations.

npx shadcn@latest add https://smoothui.dev/r/checkbox.json

clip-corners-button ui

A ClipCornersButton component for SmoothUI.

npx shadcn@latest add https://smoothui.dev/r/clip-corners-button.json

combobox ui

An animated Combobox component for SmoothUI with text filtering, async search, and keyboard navigation.

npx shadcn@latest add https://smoothui.dev/r/combobox.json