Magic UI

Overview

Magic UI is a UI library for design engineers with more than 150 free, open-source animated components and effects built with React, TypeScript, Tailwind CSS and Motion. It is designed as a companion to shadcn/ui, and its components are copied into a project through the shadcn CLI. The GitHub repository has over 22,000 stars and is MIT licensed.

The registry contains 78 UI components and 170 examples, covering text effects, backgrounds and patterns, device mockups, buttons and interactive layout pieces for landing pages. A separate paid tier, Magic UI Pro, adds 50+ blocks and templates for building marketing sites, and the homepage showcases landing pages from startups and personal portfolios built with the library.

Features

• Text effects: Aurora text, morphing text, hyper text, typing animation, word rotate, sparkles text, text reveal and number ticker.
• Backgrounds and patterns: Dot, grid, hexagon and striped patterns, flickering grid, retro grid, warp background, meteors, particles and light rays.
• Cards and borders: Magic card spotlight, neon gradient card, border beam, shine border and bento grid.
• Buttons: Shimmer, rainbow, pulsating, ripple, shiny and interactive hover buttons.
• Mockups and media: Safari, iPhone and Android frames, hero video dialog, tweet cards, globe, dotted map and icon cloud.
• Interaction pieces: Dock, marquee, animated beam, orbiting circles, lens, smooth cursor, file tree, terminal and an animated theme toggler.
• Magic UI Pro: Paid blocks and templates for complete landing pages.

Tech stack

• React, TypeScript, Tailwind CSS, Motion, shadcn/ui

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @magicui/component-name