mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-26 22:26:05 +00:00
9e0a86122a
Updated broken link in documentation routing file. This ensures that the correct content is loaded based on the slug.
65 lines
1.2 KiB
Plaintext
65 lines
1.2 KiB
Plaintext
---
|
||
title: Next.js
|
||
description: Install and configure Next.js.
|
||
---
|
||
|
||
<Callout>
|
||
|
||
**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
|
||
|
||
</Callout>
|
||
|
||
<Steps>
|
||
|
||
### Create project
|
||
|
||
Run the `init` command to create a new Next.js project or to setup an existing one:
|
||
|
||
```bash
|
||
npx shadcn@latest init
|
||
```
|
||
|
||
<Callout className="mt-4">
|
||
|
||
You can use the `-d` flag for defaults i.e `new-york`, `zinc` and `yes` for the css variables.
|
||
|
||
```bash
|
||
npx shadcn@latest init -d
|
||
```
|
||
|
||
</Callout>
|
||
|
||
### Configure components.json
|
||
|
||
You will be asked a few questions to configure `components.json`:
|
||
|
||
```txt showLineNumbers
|
||
Which style would you like to use? › New York
|
||
Which color would you like to use as base color? › Zinc
|
||
Do you want to use CSS variables for colors? › no / yes
|
||
```
|
||
|
||
### That's it
|
||
|
||
You can now start adding components to your project.
|
||
|
||
```bash
|
||
npx shadcn@latest add button
|
||
```
|
||
|
||
The command above will add the `Button` component to your project. You can then import it like this:
|
||
|
||
```tsx {1,6} showLineNumbers
|
||
import { Button } from "@/components/ui/button"
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div>
|
||
<Button>Click me</Button>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
</Steps>
|