Magic UI

Overview

Magic UI is a curated library of over 50+ high-end animated UI components designed specifically for modern landing pages, SaaS showcases, and tech startups. Built with React, TypeScript, Tailwind CSS, and Motion (Framer Motion), it lets developers build award-winning websites with copy-paste simplicity.

From interactive Bento Grids to pulsing border beams and shimmering text effects, Magic UI transforms static interfaces into immersive digital experiences.

Key Features

• ✨ 50+ High-Impact Animated Components: Bento grids, globe visualizations, marquee scrollers, particle backgrounds, and glowing border animations.
• 📋 Copy-and-Paste Workflow: Follows the shadcn/ui design philosophy—copy code directly or add via CLI without heavyweight runtime overhead.
• 🎨 Tailwind CSS Native: Effortlessly style and configure animations using familiar Tailwind utility classes and CSS variables.
• 📱 Mobile & Dark Mode Optimized: Fully responsive layouts with seamless dark mode support across all components.

Installation & Quick Start

# Using shadcn CLI registry
npx shadcn@latest add https://magicui.design/r/bento-grid
npx shadcn@latest add https://magicui.design/r/border-beam

Basic Usage Example

import React from 'react';
import { BorderBeam } from "@/components/magicui/border-beam";

export default function CardDemo() {
  return (
    <div className="relative rounded-2xl border p-6 bg-card">
      <h3 className="font-bold text-lg">Next-Gen SaaS</h3>
      <p className="text-muted-foreground text-sm">Experience cutting-edge interactive effects.</p>
      <BorderBeam size={250} duration={12} delay={9} />
    </div>
  );
}

When to Choose

• Ideal For: High-converting marketing landing pages, developer portfolio showcases, product launch pages, and interactive feature highlights.
• Alternatives: For pure low-level physics animations without pre-made markup, use Framer Motion or React Spring directly.