Magic UI
150+ animated shadcn-compatible React components for landing pages
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/globeAdd 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.
- 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
- 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
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.








