Next.js

Information

This project and all components are written in TypeScript. We recommend using TypeScript for your project as well.

Create project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest

Configure your project

You will be asked a few questions to configure your project:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

Run the CLI

Run the magicui-cli init command to setup your project:

npx magicui-cli init

Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? » Default
Which color would you like to use as base color? » Slate
Would you like to use CSS variables for colors? ... no / yes

That's it

You can now start adding components to your project.

npx magicui-cli add blur-in

The command above will add the Blur In animation component to your project. You can then import it like this:

import BlurIn from "@/components/magicui/blur-in";
 
export default function Home() {
  return (
    <div>
      <BlurIn word={"Hello World"}></BlurIn>
    </div>
  );
}