Magic UI
150+ animated shadcn-compatible React components for landing pages
Tier A · StrongAnimation LibraryComponent LibraryRegistrymagicui.design
Magic UI is an MIT-licensed library of animated React components built on React, TypeScript, Tailwind CSS and Motion, installed through the same shadcn CLI flow as shadcn/ui. The free set covers marquees, terminals, bento grids, docks, device mocks, 18 text animations, 11 backgrounds and a large community section. A paid tier, Magic UI Pro, adds 50+ landing-page sections and 9 full Next.js templates. It is explicitly positioned as a companion to shadcn/ui, which supplies the accessible primitives Magic UI does not.
npx shadcn@latest add @magicui/globeFor an agent
Add Magic UI on top of an existing shadcn/ui project rather than instead of it — the CLI, registry format and CSS variables are identical, so the two compose without config, but Magic UI ships zero accessible primitives (no dialog, no select, no combobox). Use it for the marketing surface: Marquee for logo walls, Bento Grid for feature sections, Number Ticker for stats, Safari/iPhone mocks for product shots. Nearly every component is a Motion client component, so mark them `'use client'` and keep them out of the critical render path in an RSC app.
Why it is here. It is the default landing-page motion layer for the shadcn ecosystem — the same install flow, the same tokens, and enough components that a marketing page can be assembled entirely from the registry.
Facts
- License
- MIT
- Pricing
- Free, Open source, Freemium, One-time purchase
- Framework
- React, Next.js
- Styling
- Tailwind CSS v4, Tailwind CSS v3, Tailwind CSS, CSS custom properties
- Distribution
- shadcn registry, CLI installer, Copy-paste snippet, npm package, GitHub repository, MCP server
- Platform
- Web
- Content type
- Code
- Agent readiness
- Machine-readable registry item, CLI installable, MCP server, Structured documentation, Copy-paste ready code, Readable open source
- Accessibility
- Honors reduced motion, Known accessibility gaps
- Maturity
- Actively maintained
- Pricing detail
- Core library free and MIT. Magic UI Pro individual license: $199 one-time, lifetime access and updates, commercial use.
- GitHub stars
- 21,971
Components it ships
150 totalHelps you build
7Templates
9- CodeForge · Developer-tool and API landing page with inline code snippet blocks
- AI Agent · Landing page for an AI startup or agent product
- Dev Tool · Developer-tool marketing site with an MDX blog
- Mobile · Mobile-app showcase with App Store / Play Store links
- SaaS · General SaaS product landing page
- Startup · Startup launch page with swappable sections
- Portfolio · Personal portfolio for creatives and professionals
- Changelog · Product update and release-notes site
- Blog · MDX blog with SEO metadata wired up
Notable for
- same install flow as shadcn/ui
- 18 text animations, 11 background patterns
- Safari, iPhone and Android device mocks
- MCP server for agent installs
- 9 Next.js templates behind a $199 Pro license
Provenance
Verified 2026-08-15. HTTP 200. https://magicui.design/docs/components (full sidebar enumeration), https://magicui.design/docs/installation, https://pro.magicui.design/ (template list and pricing), https://github.com/magicuidesign/magicui, GitHub API repo metadata. Note: https://magicui.design/docs/templates returns 404.
Also in Motion & Interaction
6- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Lenis · Smooth-scroll engine that keeps native scroll and honours reduced-motion
- Motion · Hybrid JS/React/Vue animation engine with springs, layout and scroll animation
- NumberFlow · Dependency-free animated number component for React, Vue, Svelte and JS
- React Bits · 234 copy-paste animated React components: text effects, cursors, WebGL backgrounds
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture