Registry Index
ma
componentsReact

@magicui

UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui.

247 items26 screenshots39 run livemagicui.design

Add to components.json

In catalog
"registries": {
  "@magicui": "https://magicui.design/r/{name}"
}

Then npx shadcn@latest add @magicui/<item> — every tile below copies its own command.

247 items · up to 8 live frames run at once, nearest the viewport

Second example showing a mockup of an Android device.

Android Demo 2
android-demo-2
Example

Second example showing text with animated gradient backgrounds.

Animated Gradient Text Demo 2
animated-gradient-text-demo-2
Example

Overlapping circles of avatars.

Avatar Circles
avatar-circles
Component

Example showing a mockup of an Android device.

Android Demo
android-demo
Example

An animated gradient background which transitions between colors for text.

Animated Gradient Text
animated-gradient-text
Component

A beautiful aurora text effect

Aurora Text
aurora-text
Component

A mockup of an Android device.

Android
android
Component

An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.

Animated Beam
animated-beam
Component

A light glare effect which pans across text making it appear as if it is shimmering.

Animated Shiny Text
animated-shiny-text
Component

An example of the backlight component with a video.

backlight-video-demo
Example

Third example showing a mockup of an Android device.

Android Demo 3
android-demo-3
Example

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

Animated List
animated-list
Component

A backlight glow effect for videos, images, and SVGs.

Backlight
backlight
Component