Magic UI

Overview

Magic UI is a collection of animated React components for landing pages, built on Tailwind CSS and the motion animation library. It is distributed as a shadcn registry: one command copies a component's source into your project, so you own the code and can edit it freely. There is no runtime package to depend on.

Key traits:

• Installed with the shadcn CLI through the @magicui registry namespace
• Components are copied to components/ui/ (the path set by the ui alias in components.json)
• Named exports (import { Marquee } from "@/components/ui/marquee"), TypeScript first
• Animation keyframes live in your global CSS; the CLI adds them for you

The old magicui-cli npm package was last published in July 2024 and is no longer maintained. Do not use it; the commands below replace it.

Instructions

Prerequisites