SmoothUI vs shadcn/ui

The Best of Both Worlds

SmoothUI isn't a replacement for shadcn/ui - it's the perfect companion. While shadcn/ui excels at providing solid, accessible base components, SmoothUI extends the ecosystem with animated, interactive components that bring your interfaces to life.

Why Choose SmoothUI?

Smooth Motion Animations

Every SmoothUI component is built with Motion (Framer Motion) animations that feel natural and polished. No more wrestling with CSS keyframes or animation libraries - animations are built-in and optimized for performance.

// Just import and use - animations included
import { ExpandableCards } from "@/components/ui/expandable-cards"

<ExpandableCards items={cards} />

Same Workflow, Added Motion

If you're familiar with shadcn/ui, you'll feel right at home. SmoothUI uses the same CLI installation pattern:

npx shadcn@latest add @smoothui/expandable-cards

Components are copied into your project, giving you full ownership and customization control.

Built for Modern React

SmoothUI components follow React best practices:

• Server Components compatible - Works with Next.js App Router
• TypeScript first - Full type definitions included
• Tailwind CSS v4 - Uses the latest Tailwind features
• Accessibility - Respects prefers-reduced-motion

Feature Comparison

When to Use Each

Use shadcn/ui for:

• Form inputs, selects, and form validation
• Modal dialogs and alert dialogs
• Navigation menus and dropdowns
• Data tables and pagination
• Basic buttons and badges

Use SmoothUI for:

• Animated card layouts and expandable cards
• Smooth hover effects and micro-interactions
• Dynamic content transitions
• Interactive showcases and galleries
• Animated text effects (typewriter, wave, scramble)
• Loading states with motion

Working Together

The best approach is using both libraries together. Here's a typical setup:

// shadcn/ui for the form structure
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent } from "@/components/ui/dialog"

// SmoothUI for animated elements
import { AnimatedInput } from "@/components/ui/animated-input"
import { ScrambleHover } from "@/components/ui/scramble-hover"
import { ExpandableCards } from "@/components/ui/expandable-cards"

Both libraries use the same folder structure (components/ui/) and Tailwind CSS foundation, making them seamlessly compatible.

Get Started

Frequently Asked Questions