Next.js Installation
Add Dot components to a Next.js app. They are TypeScript React components built on Framer Motion and styled inline, so they work with or without Tailwind CSS.
1
Create a Next.js Project
Starting fresh? Create a Next.js app with the official starter. Already have a project? Skip to step 2.
npx create-next-app@latest my-dot-app --typescript --tailwind --eslint --app2
Install Framer Motion
Dot components animate with Framer Motion, their only dependency. The CLI installs it for you, so you can skip this step if you use it.
npm install framer-motion3
Add Your First Component
Use the Dot CLI, which writes the file to components/dot/, or copy the code from any component page into that folder yourself.
npx dotui add blur-reveal-text4
Use It
Import it like any React component. Dot components are already marked "use client", so they work inside Server Component pages too.
app/page.tsxtsx
import { BlurRevealText } from "@/components/dot/blur-reveal-text";
export default function Page() {
return <BlurRevealText text="Design that reveals itself" as="h1" />;
}