Skip to content
Recaply.
Sign inSubmit a tool

DirectoryTools

Magic UI logo

Magic UI

Open-source set of 150+ animated React components on Tailwind CSS and Motion for landing pages.

Visit Magic UI

Coding & WebOpen SourceWe checked the prices on pro.magicui.design on 8 Nov 2026.

Magic UI homepage screenshot

What is Magic UI?

Open-source set of 150+ animated React components on Tailwind CSS and Motion for landing pages.

Coding & WebDesign to CodeReact componentsAnimationTailwind CSS

Who is Magic UI best for?

Magic UI is best for React developers and design engineers who add animated effects to landing pages.

  • Landing page polish

    Marquees, bento grids, animated beams, globes and text effects add motion to a SaaS or startup page.

  • shadcn/ui projects

    Components install with the shadcn CLI from the @magicui registry and sit next to shadcn/ui parts.

  • AI-assisted coding

    The Magic UI MCP server, or the shadcn MCP with the Magic UI registry, lets Cursor, Windsurf or Claude add components by name.

  • Starting from a template

    Pro templates for SaaS, AI agent, dev tool and mobile app pages come as Next.js projects with Tailwind CSS.

How much does Magic UI cost?

Magic UI's 150+ components are free under the MIT license; Magic UI Pro costs $199 once for 50+ sections and 9+ templates, and single Pro templates cost $49.

Open source$0MIT license
  • 150+ animated components and effects
  • React, TypeScript, Tailwind CSS and Motion
  • Install with the shadcn CLI or the MCP server
Single template$49One-time
  • One Pro template, such as SaaS or AI Agent
  • Next.js, React and Tailwind CSS
  • Live preview before you buy
Individual License$199One-time
  • 50+ sections and 9+ templates
  • Lifetime access and updates
  • Commercial use; reselling the code is not allowed

The Pro license is perpetual and covers one person. Some templates, such as Portfolio and Changelog, are free downloads. The open-source components can be used, changed and redistributed under the MIT license as long as the license notice stays. Full pricing on pro.magicui.design. We checked these prices on .

How do readers rate Magic UI?

No one has rated Magic UI yet. Be the first.

No ratings yetThe score and its stars show once 3 readers have rated Magic UI.
Your rating

Sign in to rate. One rating per account.

Your rating of Magic UI

Is Magic UI open source?

Yes. Magic UI's code is public under the MIT licence, so you can read it, change it and run it yourself.

On GitHub

23,234stars

Last commit
13 Nov
Repository age
3 years
Licence
MIT
Run it yourselfThe code and the steps to set it up are in its repository on GitHub.View on GitHub

How do I connect Magic UI to my AI agent?

Magic UI MCP is Magic UI's official MCP server. Add it to your agent once, then ask it to install Magic UI animated components in a React project.

Your agent can search the Magic UI library of animated React components and add pieces such as marquees, text effects and backgrounds to your app.

Setup guide

Magic UI gives each account its own server address. Open the setup guide, copy your address, then add it to Claude Code like any other server.

It runs on your computer, so Claude Code starts it when it needs it.

Magic UI's setup guide covers the sign-in.

Then ask your agent

Runs
On your computer
Sign-in
See guide
Maker
Magic UI

What are the best Magic UI alternatives?

Magic UI is an open source alternative to React Bits and 21st.dev. shadcn/ui does the same job and is open source too.

React BitsFree

Free set of 215+ animated text effects, cursors, galleries and shader scenes for React developers.

21st.devFree

React and Tailwind components, themes and templates that you or your AI coding agent add to a repo.

shadcn/uiOpen Source

Free, MIT-licensed set of accessible React components whose source the CLI copies into your app.

Questions about Magic UI

What is Magic UI?

Open-source set of 150+ animated React components on Tailwind CSS and Motion for landing pages.

Who is Magic UI for?

Magic UI is best for React developers and design engineers who add animated effects to landing pages.

Is Magic UI free for commercial use?

Yes. The open-source components are under the MIT license, which allows commercial use, changes and redistribution as long as the license notice stays. Magic UI Pro templates can be used in commercial projects too, but the code cannot be resold.

How much does Magic UI cost?

Magic UI's paid plans are Single template at $49 one-time and Individual License at $199 one-time.

Is Magic UI open source?

Yes. Magic UI's code is public under the MIT licence, so you can read it, change it and run it yourself.

Does Magic UI have an MCP server?

Yes. Magic UI MCP is Magic UI's official MCP server, so agents such as Claude Code, Cursor, Codex and GitHub Copilot can install Magic UI animated components in a React project. It runs on your computer.

What are the best Magic UI alternatives?

The closest alternatives on Recaply are React Bits, 21st.dev and shadcn/ui.

Where can I try Magic UI?

On its official website, magicui.design.

Coding & Web

More in Coding & Web.

All
BoardUIOpen Source

Open-source React and Tailwind components for dashboards and AI chat apps, with paid Pro templates.

Arc UIOpen Source

React components and app blocks in plain TSX and CSS modules, with a free MIT core and paid Pro set.

termcnOpen Source

Copy-paste terminal UI components for React command-line apps and AI agent CLIs on Ink or OpenTUI.

daisyUIOpen Source

Free Tailwind CSS plugin that adds short class names for buttons, cards, modals and site themes.

ShadcnblocksFree

Library of 2,800+ shadcn/ui blocks and 2,200+ components you copy or install with the shadcn CLI.

ShadersOpen Source

MIT-licensed WebGPU effect components for React, Vue and Svelte, with a free browser design editor.

Built an AI tool?

Get it in front of 3,400+ builders.

Get listed, promote it in its category, or sponsor the directory.

Submit a toolAdvertise