Docs

Next.js

Next.js

Install and configure Atlas UI for Next.js.

Create project

Run the init command to create a new Next.js project or to setup an existing one:

pnpm dlx shadcn@latest init

Install dependencies

pnpm add motion

Add components

You can now start adding Atlas UI components to your project.

pnpm dlx shadcn@latest add https://atlasui.dev/r/reveal-effect.json

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

import { RevealEffect } from "@/components/reveal-effect";
 
export const RevealEffectDemo = () => {
  return (
    <div className="flex flex-col items-center space-y-2">
      <RevealEffect>
        <h1 className="text-5xl font-bold">Atlas UI</h1>
      </RevealEffect>
 
      <RevealEffect delay={0.2} translateY={15}>
        <p className="text-center text-xl font-semibold">
          This is the same effect you saw on the homepage ;)
        </p>
      </RevealEffect>
    </div>
  );
};
llms.txtHTML