1. Create a new Next.js project with Tailwind CSS

Run the following command to create a new Next.js project. The interactive CLI will guide you through the setup process.

npx create-next-app@latest your-project-name

cd your-project-name

Important: When prompted during installation, make sure to select:

• ✅ TypeScript - For type safety and better developer experience
• ✅ Tailwind CSS - Required for PageKit styling
• ✅ App Router - Recommended for modern Next.js features

2. Initialize ShadCN in your project

ShadCN CLI will set up the necessary configuration files and folder structure for managing your components. This is a one-time setup process.

Follow the prompts to configure your project. The defaults work great for most projects.

3. Add PageKit registry to your configuration

After initialization, you'll find a components.json file in your project root. Open it and add the PageKit registry to the registries section:

{

"registries": {
"@pagekit": "https://page-kit.vercel.app/r/{name}.json"
}
}

This tells ShadCN where to find PageKit components when you want to add them to your project.

4. Add PageKit components to your project

Now you're ready to add PageKit components! Use the @pagekit prefix to add any component. For example, to add a button:

The component will be automatically added to your components/ui folder, ready to use in your application. You can then import and use it like any other React component.