Magic UI

Animated React and Tailwind UI components designed for landing pages

From the Xiry library · Updated 10 October 2026

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.

What it's 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
Topic: UI Components
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: Source of the Animated List component and future components; the site has copy-paste component pages.
@dillionverma, 25 May 2024: A popular component library for animated design/landing-page elements; useful resource for building interfaces.
@dillionverma, 15 October 2024: 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

shadcn/ui
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Efferd
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Motion
Open-source animation library for React, Vue, and vanilla JavaScript
React Bits
Open-source animated and interactive React UI components and backgrounds
21st.dev
Curated directory of crafted React, Tailwind, and shadcn UI components.
lucide-animated
Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated 10 October 2026