I'll fetch that shadcn/ui documentation for you so I can help you understand it and answer any questions you have.
I've got the documentation. Let me break down how to use shadcn/ui with Next.js for you:
shadcn/ui is not a traditional component library that you install via npm. Instead, it's a collection of reusable components that you copy directly into your project. This gives you full control over the code.
Start with the CLI command:
pnpm dlx shadcn@latest initThis command:
components.json file (configuration file)lib/utils.tsAdd components individually as needed:
pnpm dlx shadcn@latest add buttonThis copies the Button component into your components/ui/ folder. The code is now yours to modify!
Simply import and use them:
import { Button } from "@/components/ui/button"
export default function Home() {
return <Button>Click me</Button>
}I'm ready to:
What would you like to explore?
I see you've copied the example code! Are you:
Let me know what you'd like to explore with shadcn/ui and I'll help you out!