Next.js

Create project

Create a new Next.js project:

pnpm create next-app@latest my-app --yes

Add CSS

Create a file styles/globals.css with:

@import "tailwindcss";

Run the CLI

Run the shadcn init command to set up your project:

bunnpmpnpmyarn
pnpm dlx shadcn@latest init.json

The CLI asks a few questions and creates a components.json file with path aliases, style options, and Tailwind config.

Add components

Add components from the Shark registry by URL:

pnpm dlx shadcn@latest add https://shark.vini.one/r/button.json

Then import and use them:

import { Button } from "@/components/ui/button";
 
export default function Page() {
  return <Button>Click me</Button>;
}