Magic UI
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source. observed · 2026-10-21
Health v2 · maintenance only
74/100
- Activity 100
- Release rhythm 35
- Longevity 86
Flags: no_releases
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-10-21. Adoption (stars, forks) is never an input.
- gap_med: n/a
- age_days: 1212
- days_rel: n/a
- days_push: 3
- n_releases_24m: 0
Adoption not part of the score
22768 stars · 1195 forks observed · 2026-10-21
What it is AI-extracted, prompt v1, taxonomy v1, 2026-10-12, confidence 0.97
Magic UI is an open‑source UI component library that provides animated React components built with Tailwind CSS and Framer Motion. It offers copy‑and‑paste ready blocks and effects for design engineers to quickly build beautiful landing pages and interfaces.
Use cases
- Add animated UI components to a React web app
- Build a landing page with pre‑styled Tailwind CSS blocks
- Create interactive visual effects like particle backgrounds
- Prototype UI designs quickly using ready‑made components
- Integrate motion‑driven elements into a Next.js project
- Enhance a design system with copy‑paste React components
When to choose
- You need a collection of ready‑made, animated React components with Tailwind styling.
- Your project uses React, Next.js, or other modern JavaScript frameworks.
- You want a free, MIT‑licensed library that works well with shadcn/ui.
- You prefer components that are easy to copy‑paste without heavy configuration.
When to avoid
- Your stack is not based on React or you need a framework‑agnostic solution.
- You require server‑side rendering without client‑side animation support.
- You need components that are tightly integrated with non‑Tailwind CSS styling.
Facets
library · maturity active
ui-components animation frontend-framework css-framework web-development frontend browser mdx framer-motion nextjs shadcn-ui open-source free design-engineering nodejs react typescript tailwindcss
3 sources
- readme: https://github.com/magicuidesign/magicui · fetched 2026-10-21 · d735bba4db6a
- homepage: https://magicui.design · fetched 2026-09-28 · 26464e6259ec
- site_page: https://magicui.design/docs/components/floating-3d-particles · fetched 2026-09-28 · 5452bb2fdcf8
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| magicuidesign/magicui | main | 74 |
| magicuidesign/mcp | backend | 51 |
For agents
markdown · JSON · MCP: product_card(name="magicuidesign/magicui")
Data as of 2026-10-19T08:05:51.212177+00:00 · Report a problem