Next.js Installation
Install and configure spy-ui for your Next.js project.
1. Create project
Start by creating a new Next.js project using create-next-app. We recommend using TypeScript and Tailwind CSS.
Terminal
2. Run the CLI
Run the shadcn-ui init command to setup your project. Since spy-ui components are highly compatible with shadcn/ui, we recommend initializing it first.
Terminal
3. Add Dependencies
Install Framer Motion and Lucide React, which power most of the animations and icons in spy-ui.
Terminal
4. Configure Utils
Ensure you have the cn utility function set up in your project (usually at lib/utils.ts). It is used to conditionally join Tailwind CSS classes.
lib/utils.ts
5. Add Components
You're now ready to add components to your project. Use the CLI to directly add a component from spy-ui!
Terminal