mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-27 14:44:12 +00:00
152 lines
3.6 KiB
Plaintext
152 lines
3.6 KiB
Plaintext
---
|
||
title: Next.js
|
||
description: Install and configure Next.js.
|
||
---
|
||
|
||
<Steps>
|
||
|
||
### Create project
|
||
|
||
Start by creating a new Next.js project using `create-next-app`:
|
||
|
||
```bash
|
||
npx create-next-app@latest my-app --typescript --tailwind --eslint
|
||
```
|
||
|
||
### Run the CLI
|
||
|
||
Run the `shadcn-ui` init command to setup your project:
|
||
|
||
```bash
|
||
npx shadcn-ui@latest init
|
||
```
|
||
|
||
### Configure components.json
|
||
|
||
You will be asked a few questions to configure `components.json`:
|
||
|
||
```txt showLineNumbers
|
||
Would you like to use TypeScript (recommended)? no / yes
|
||
Which style would you like to use? › Default
|
||
Which color would you like to use as base color? › Slate
|
||
Where is your global CSS file? › › app/globals.css
|
||
Do you want to use CSS variables for colors? › no / yes
|
||
Where is your tailwind.config.js located? › tailwind.config.js
|
||
Configure the import alias for components: › @/components
|
||
Configure the import alias for utils: › @/lib/utils
|
||
Are you using React Server Components? › no / yes
|
||
```
|
||
|
||
### Fonts
|
||
|
||
I use [Inter](https://rsms.me/inter/) as the default font. Inter is not required. You can replace it with any other font.
|
||
|
||
Here's how I configure Inter for Next.js:
|
||
|
||
**1. Import the font in the root layout:**
|
||
|
||
```js showLineNumbers title=app/layout.tsx {2,5-8,16-17}
|
||
import "@/styles/globals.css"
|
||
import { Inter as FontSans } from "next/font/google"
|
||
|
||
import { cn } from "../@/lib/utils"
|
||
|
||
export const fontSans = FontSans({
|
||
subsets: ["latin"],
|
||
variable: "--font-sans",
|
||
})
|
||
|
||
export default function RootLayout({ children }: RootLayoutProps) {
|
||
return (
|
||
<html lang="en" suppressHydrationWarning>
|
||
<head />
|
||
<body
|
||
className={cn(
|
||
"min-h-screen bg-background font-sans antialiased",
|
||
fontSans.variable
|
||
)}
|
||
>
|
||
...
|
||
</body>
|
||
</html>
|
||
)
|
||
}
|
||
```
|
||
|
||
**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`**
|
||
|
||
```js showLineNumbers title=tailwind.config.js {9-11}
|
||
const { fontFamily } = require("tailwindcss/defaultTheme")
|
||
|
||
/** @type {import('tailwindcss').Config} */
|
||
module.exports = {
|
||
darkMode: ["class"],
|
||
content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
||
},
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
### App structure
|
||
|
||
Here's how I structure my Next.js apps. You can use this as a reference:
|
||
|
||
```txt {6-10,14-15}
|
||
.
|
||
├── app
|
||
│ ├── layout.tsx
|
||
│ └── page.tsx
|
||
├── components
|
||
│ ├── ui
|
||
│ │ ├── alert-dialog.tsx
|
||
│ │ ├── button.tsx
|
||
│ │ ├── dropdown-menu.tsx
|
||
│ │ └── ...
|
||
│ ├── main-nav.tsx
|
||
│ ├── page-header.tsx
|
||
│ └── ...
|
||
├── lib
|
||
│ └── utils.ts
|
||
├── styles
|
||
│ └── globals.css
|
||
├── next.config.js
|
||
├── package.json
|
||
├── postcss.config.js
|
||
├── tailwind.config.js
|
||
└── tsconfig.json
|
||
```
|
||
|
||
- I place the UI components in the `components/ui` folder.
|
||
- The rest of the components such as `<PageHeader />` and `<MainNav />` are placed in the `components` folder.
|
||
- The `lib` folder contains all the utility functions. I have a `utils.ts` where I define the `cn` helper.
|
||
- The `styles` folder contains the global CSS.
|
||
|
||
### That's it
|
||
|
||
You can now start adding components to your project.
|
||
|
||
```bash
|
||
npx shadcn-ui@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>
|