What is this?
Magic UI is a free, open-source UI library for design engineers: animated components and effects you copy and paste straight into your apps.
Magic UI is a free, open-source UI library for design engineers: animated components and effects you copy and paste straight into your apps.So it's not an npm package I install — how does it ship?It ships as source code: you browse the catalog of animated components and effects in the docs and paste what you need into your own app, with no runtime dependency to install.
It ships as source code: you browse the catalog of animated components and effects in the docs and paste what you need into your own app, with no runtime dependency to install.How do I get one of these components into my app?Open the documentation site linked at the top of the README, pick a component and copy its code into your project. To run the site itself, the repo is a pnpm + Turborepo monorepo needing Node >= 22.14 and pnpm >= 9, started with pnpm dev.
Open the documentation site linked at the top of the README, pick a component and copy its code into your project. To run the site itself, the repo is a pnpm + Turborepo monorepo needing Node >= 22.14 and pnpm >= 9, started with pnpm dev.What does my project need for these components to work?They are React + TypeScript components styled with Tailwind CSS on top of shadcn/ui and animated with Framer Motion, with Next.js in the stack — so a React or Next.js app with Tailwind set up is the target.
They are React + TypeScript components styled with Tailwind CSS on top of shadcn/ui and animated with Framer Motion, with Next.js in the stack — so a React or Next.js app with Tailwind set up is the target.Is it free to use in commercial projects?Yes — it's free and open source under the MIT license, so you can use the components in commercial apps without paying.
Yes — it's free and open source under the MIT license, so you can use the components in commercial apps without paying.Can I add my own components to the library?Yes — the README says contributing takes about five minutes to add your own, via the project's contributing guide, and there's a Discord for questions and feedback.
Yes — the README says contributing takes about five minutes to add your own, via the project's contributing guide, and there's a Discord for questions and feedback.Can I tweak a component after pasting it, or am I stuck with the default look?Tweak anything — once pasted, the code lives in your repo like your own source, so restyling or extending a component is exactly like editing your own code.
Tweak anything — once pasted, the code lives in your repo like your own source, so restyling or extending a component is exactly like editing your own code.Is the project actively maintained?Signs point to yes: about 22,600 GitHub stars, CI workflows for code checks and publishing, and the repo is not archived.
Signs point to yes: about 22,600 GitHub stars, CI workflows for code checks and publishing, and the repo is not archived.What are similar projects?cult-ui, rare-ui, arc-library, canvas-ui, Monocharts, open-claude-ui, boardui, chakra-ui
cult-ui, rare-ui, arc-library, canvas-ui, Monocharts, open-claude-ui, boardui, chakra-uiWhich topics is it in?framer-motion, snippets, mdx, react-components, shadcn-ui, components, ui-library, tailwindcss, component-library, design, nextjs, ui-components
framer-motion, snippets, mdx, react-components, shadcn-ui, components, ui-library, tailwindcss, component-library, design, nextjs, ui-components