# Magic UI

> Animated React and Tailwind UI components designed for landing pages

Magic UI is a component collection built with React, TypeScript, Tailwind CSS, and Motion that focuses on interactive animations and visual effects. It works alongside shadcn/ui to provide copy-paste components like animated lists, notification feeds, and background particles. While over 150 components are free and open source, it also offers a paid Pro tier with pre-built landing page templates.

Website: https://magicui.design/

## What it is for

- Add animated notification feeds and lists to SaaS landing pages
- Enhance shadcn/ui setups with motion and background visual effects
- Quickly assemble marketing landing pages using pre-made templates and blocks

## Features

- Over 150 free and open-source animated UI components
- Built specifically for React, TypeScript, Tailwind CSS, and Motion (Framer Motion)
- Designed to integrate directly with shadcn/ui component workflows
- Copy-paste component code for direct inclusion in codebases
- Magic UI Pro tier offering full landing page templates and section blocks

## Pricing

Freemium. Free and open-source core library; Pro templates available via one-time paid access

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers and design engineers building React landing pages
- Alternative to: shadcn/ui, Aceternity UI, Tailwind UI
- Tags: react, tailwind css, ui library, framer motion, landing pages, components

## Why it was saved

- [@dillionverma, 15 December 2023](https://x.com/dillionverma/status/1735656545290215889): Source of the Animated List component and future components; the site has copy-paste component pages.
- [@dillionverma, 25 May 2024](https://x.com/dillionverma/status/1794480323390263597): A popular component library for animated design/landing-page elements; useful resource for building interfaces.
- [@dillionverma, 15 October 2024](https://x.com/dillionverma/status/1846038911740416030): This tweet shows a glowing unsolicited testimonial from a user who rebuilt his website using Magic UI components and the pro Startup template, calling it a life-saver. Useful as social proof to reuse in marketing.

## Compare

- [Alternatives to Tailwind UI](https://xiry.app/alternatives/tailwind-ui.md)
- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to shadcn/ui](https://xiry.app/alternatives/shadcn-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/magic-ui

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.