Final pick
Recommended 2026 stack
A modern, mobile-first React + Tailwind stack for Next.js PWAs and SaaS — no React Native required. Each row pairs a role with the tool that owns it. Jump to a section to see live components, or scan the table for the overview.
Core UI
shadcn/ui
Free · MIT19 demos ↓Desktop structures
Tailwind Plus
$299 one-time5 demos ↓Mobile drawers
Vaul
Free · MIT6 demos ↓Motion
Motion (was Framer Motion)
Free · MIT6 demos ↓Variants system
Tailwind Variants (tv)
Free · MIT3 demos ↓Accessibility / interactions
React Aria
Free · Apache 2.024 demos ↓Premium polish
Magic UI
Free core · Pro templates $99-19921 demos ↓Core UI
Free · MITshadcn/ui
Copy-paste primitive components built on Radix UI. You own the code after install. The lingua franca of React + Tailwind UI.
Button
Tabs
Dialog
Card
Use for product cards, dashboard tiles, settings panels — anywhere you need a bordered region.
Avatar
Accordion
Alert
Badge
Breadcrumb
Checkbox
Input
Popover
Progress
Radio Group
Notifications
Select
Separator
Radix UI
An open-source UI component library.
Slider
Switch
Tooltip
Desktop structures
$299 one-timeTailwind Plus
Production-grade marketing pages, dashboards, e-commerce templates. Polished HTML/React/Vue you adapt to your brand.
Components are gated behind purchase. Cards below summarize what you get + the four categories.
Overview
$299 · one-time
All-access · lifetime
500+ HTML / React / Vue components and 10+ full template sites. Unlimited projects, lifetime updates.
View on tailwindcss.com/plus →Mobile drawers
Free · MITVaul
Native-feel mobile bottom sheets with drag-to-dismiss, momentum scroll, safe-area awareness. The mobile drawer everyone copies.
Pairs with AREA's own Vaul-based wrappers (BottomSheet, ResponsiveDialog, BottomNav, FAB, StickyCTA) shown below.
Vaul drawer (raw)
AREA BottomSheet
AREA ResponsiveDialog
AREA BottomNav
AREA FAB
AREA StickyCTA
Step 2 of 3
Motion
Free · MITMotion (was Framer Motion)
Declarative React animations: layout, gesture, scroll, springs. Renamed from Framer Motion in 2024 — same API, new package.
The full surface: loop animations, layout transitions, drag gestures, scroll-driven, springs, enter/exit. Used internally by Magic UI, Aceternity, and our AREA components.
Loop · hover · pulse
Layout animation
layout animation
- Buy milk
- Email Jess
- Pay invoice
- Review PR
- Call dentist
Drag
Scroll-driven
scroll this card
useScroll gives you a MotionValue tied to scroll progress.
useTransform maps that 0→1 value onto any output range.
Width, rotation, opacity, color — all interpolate together.
No JS scroll listeners, no rAF loops, no jank.
Used for parallax, sticky reveal, progress indicators.
Scroll lock-step animation is essentially free.
Works inside any scroll container, not just window.
Mobile-friendly. Respects prefers-reduced-motion.
Spring physics
tap a corner
spring physics — overshoots, settles, feels natural.
Enter / Exit
AnimatePresence (enter + exit)
Saved
Your draft is up to date.
Heads up
You have 3 unread notifications.
Synced
All changes are in the cloud.
Variants system
Free · MITTailwind Variants (tv)
Compose conditional Tailwind classes with type-safe variant APIs. Like CVA but with slot support and better defaults.
Utility library, not a component library. Demos below pair the variant API with the styled output for buttons, badges, and alerts.
Button variants + code
const button = tv({
base: "inline-flex items-center rounded-md",
variants: {
intent: { primary: "bg-fg text-bg", ghost: "hover:bg-muted" },
size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm" },
},
defaultVariants: { intent: "primary", size: "md" },
});Badge variants + code
const badge = tv({
base: "rounded-full font-medium",
variants: {
tone: { success: "bg-emerald-100 ...", error: "bg-rose-100 ..." },
size: { sm: "px-2 py-0.5 text-[10px]", md: "px-2.5 py-1 text-xs" },
},
});Alert variants
Heads up
A new version is available.
Saved
Your draft is up to date.
Note
Your trial ends in 3 days.
Error
Could not connect to the server.
Accessibility / interactions
Free · Apache 2.0React Aria
Adobe's headless primitives. Full WCAG keyboard + screen reader support out of the box. The headless layer shadcn is increasingly built on. Untitled UI is built entirely on top of these.
Button
Tabs
Dialog
Switch
Checkbox
Slider
ComboBox
Select
Menu
Tooltip
Progress
DatePicker
TextField
Calendar
June 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
ColorPicker
NumberField
SearchField
Press Esc to clear · the clear button only renders when there's text.
Disclosure
accordion (Disclosure)
TagGroup
Click to (de)select · × to remove.
RadioGroup
ListBox
Popover
Meter
Premium polish
Free core · Pro templates $99-199Magic UI
Animated marketing components — shimmer buttons, marquees, animated beams, magic cards. Add wow without writing animations from scratch.
Rainbow Button
Rainbow Border
Shimmer
Shimmer Button
Magic Card
Magic Card
See how this card responds to your cursor — the gradient follows your pointer in real time.
Animated Tabs
Avatar Circles
Rotating Ring
Stacked + Pulse
Animated Shiny Text
Animated Gradient Text
Sparkles Text
Word Rotate
Built for
mobile
Number Ticker
active users this month
Animated List
New message
Hey, are you free for a call?
Marquee
Confetti
Border Beam
Border Beam
Animated gradient
tracing the edge.
Animated Beam
Ripple
Concentric ripple background
Dot Pattern
Background dot pattern
Meteors
Falling meteors ☄
Particles
Mouse-reactive particle field
Text Reveal
scroll to reveal
Icon Cloud
Why this stack
- Stay in React + Tailwind. No React Native, no Capacitor unless you need native APIs. PWAs cover most app-store use cases.
- Mobile-first.Vaul + safe-area utilities + a bottom-sheet pattern handle the mobile-specific UX that shadcn alone doesn't.
- Accessibility for free.React Aria provides headless WCAG-compliant primitives — Adobe maintains them, you don't.
- Polish where it pays. Magic UI for marketing-surface wow; Motion for purposeful interaction.
- Type-safe variants. Tailwind Variants gives you compile-time guarantees that variant props are valid.