---
name: Magic UI
slug: magic-ui
url: "https://dontmakeitugly.com/resources/magic-ui"
website: "https://magicui.design"
github: "https://github.com/magicuidesign/magicui"
docs: "https://magicui.design/docs"
type: component-library
categories:
  - components
  - motion
tags:
  - react
  - tailwind
  - motion
  - landing-pages
  - effects
  - animated
  - shadcn
frameworks:
  - react
  - nextjs
  - tailwind
pricing: freemium
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - documentation
  - github
  - cli
  - copy_paste
installCommand: "npx shadcn@latest add \"https://magicui.design/r/marquee\""
difficulty: beginner
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# Magic UI

Animated React components and effects for landing pages, built to sit alongside shadcn/ui.

- Type: Component library
- Categories: Components, Motion
- Pricing: Freemium · License: MIT
- Open source: yes
- Works with: React, Next.js, Tailwind CSS, TypeScript, Motion

## What it is

Magic UI is a collection of animated components (marquees, shimmer buttons, animated beams, bento grids, text effects) built with React, Tailwind and Motion. They are installed through the same CLI as shadcn/ui, so they drop into an existing project cleanly. There is a paid tier of full templates.

## Why it's here

The quickest way to make a landing page feel alive. Use two or three effects with restraint; a page made entirely of Magic UI components starts to look like a demo.

## Best for

- landing pages
- marketing sites
- hero sections
- product showcases

## Links

- Website: https://magicui.design
- Docs: https://magicui.design/docs
- GitHub: https://github.com/magicuidesign/magicui

## Can my agent use this?

Yes. Components install via the shadcn CLI and every doc page shows the full source. Name the exact component you want, for example "add the Magic UI Marquee component".

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Docs, GitHub, CLI, Copy/paste.
Install: `npx shadcn@latest add "https://magicui.design/r/marquee"`

## Prompt to hand your agent

```text
Use Magic UI as a design and implementation reference for this project.

What it is: Animated React components and effects for landing pages, built to sit alongside shadcn/ui.

Website: https://magicui.design
Documentation: https://magicui.design/docs
GitHub: https://github.com/magicuidesign/magicui
Install: npx shadcn@latest add "https://magicui.design/r/marquee"

Use it specifically for:
- landing pages
- marketing sites
- hero sections
- product showcases

How you can access it: Docs, GitHub, CLI, Copy/paste.
Works with: React, Next.js, Tailwind CSS.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.
- [Origin UI](https://dontmakeitugly.com/resources/origin-ui.md): Hundreds of polished, practical components built on shadcn/ui conventions.
- [Tailwind Plus](https://dontmakeitugly.com/resources/tailwind-plus.md): The official paid Tailwind component and template catalogue (formerly Tailwind UI).
- [Tremor](https://dontmakeitugly.com/resources/tremor.md): Copy-paste React components for dashboards and charts.

## In collections

- [Beautiful open-source React components](https://dontmakeitugly.com/collections/beautiful-open-source-components.md)
- [Make your landing page better](https://dontmakeitugly.com/collections/better-landing-pages.md)

Magic UI is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.