The short version: npx create-next-app@latest → npx shadcn@latest init → npx shadcn@latest add @magicui/<component> → import and render. That is the whole Magic UI workflow; there is no package to install and nothing to configure beyond a normal shadcn/ui project. This guide walks a fresh Next.js 15 + Tailwind CSS v4 project to a working hero section built from three free components — text-animate, shimmer-button and marquee — in about ten minutes, then points at the bento grid for the feature section that usually comes next.

What you are building

A landing-page hero with an animated headline, a shimmering call-to-action button and a scrolling strip of logos underneath. All three components are MIT licensed and part of the free library, so nothing in this guide costs anything; Magic UI Pro (page sections and templates, one-time $199) is only mentioned at the end as the “skip the assembly” option.

Prerequisites

Step 1 — Create the Next.js 15 project

npx create-next-app@latest my-landing --ts --tailwind --app --src-dir --import-alias "@/*"
cd my-landing

Accept the defaults. Next.js 15 with the App Router and Tailwind CSS v4 is exactly the stack Magic UI targets (React 19 works too). If you already have a project, skip to step 2 — Vite, Remix and Astro-with-React-islands all follow the same path.

Step 2 — Initialise shadcn/ui

npx shadcn@latest init

Choose your base color and confirm the CSS variables option. This creates components.json, the lib/utils.ts file with the cn helper, and the CSS variables Magic UI components read for theming (light and dark mode included). Magic UI is designed as the companion to shadcn/ui, so this one-time step is required even if you never install a shadcn primitive.

Step 3 — Add three components

npx shadcn@latest add @magicui/text-animate @magicui/shimmer-button @magicui/marquee

Each @magicui/<slug> item resolves to the official registry (the shadcn CLI knows the @magicui namespace, so no components.json change is needed); the CLI writes text-animate.tsx, shimmer-button.tsx and marquee.tsx into src/components/ui/ and adds the motion dependency (formerly Framer Motion) if your project does not have it. Open the files — they are ordinary React components with Tailwind classes, yours to edit.

Step 4 — Assemble the hero

Create src/app/page.tsx (or edit the generated one):

import { TextAnimate } from "@/components/ui/text-animate";
import { ShimmerButton } from "@/components/ui/shimmer-button";
import { Marquee } from "@/components/ui/marquee";

const logos = ["Acme", "Globex", "Initech", "Umbrella", "Hooli", "Vandelay"];

export default function Home() {
  return (
    <main className="mx-auto max-w-5xl px-6 py-24 text-center">
      <TextAnimate
        animation="blurInUp"
        by="word"
        as="h1"
        className="text-5xl font-bold tracking-tight"
      >
        Ship a landing page that moves
      </TextAnimate>
      <p className="mx-auto mt-6 max-w-2xl text-lg text-neutral-500">
        Animated React components you copy, paste and own — built on Tailwind
        CSS and Motion.
      </p>
      <div className="mt-8 flex justify-center">
        <ShimmerButton className="px-8 py-3 text-base">
          Start free
        </ShimmerButton>
      </div>
      <Marquee pauseOnHover className="mt-16 [--duration:30s]">
        {logos.map((name) => (
          <span
            key={name}
            className="mx-8 text-xl font-semibold text-neutral-400"
          >
            {name}
          </span>
        ))}
      </Marquee>
    </main>
  );
}

Run npm run dev, open http://localhost:3000, and you have an animated headline, a shimmering button and an infinite logo strip that pauses on hover. Swap the placeholder names for real logo images (<img> or next/image) and the marquee is production-ready.

Step 5 — Add the feature section (bento grid)

npx shadcn@latest add @magicui/bento-grid

BentoGrid and BentoCard give you a responsive grid of mixed-size feature cards; each card takes a name, description, icon, href and cta, plus an optional background component — many people drop a Magic UI AnimatedBeam or Globe in there. The component overview lists every family so you can pick the next piece deliberately.

Common first-run problems

Where to go next

Wire the MCP server into your editor so the next component is one sentence away; read Install Magic UI for the requirements table; and when you need a complete page rather than a hero, Magic UI Pro ships 50+ sections and 9 templates for one payment.