mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 14:08:47 +00:00
eee7ce6879
* docs: add react with vite installation guide * refactor(docs): move Ract with vite page into installation.mdx as tab * fix(docs): remove classnames and wrapper divs * fix(docs): update tsconfig file path to default @ * feat: added remix installation docs * feat: added tabbed installation docs * fix: remove log statement * fix: cleaned up, restored usage notice, removed vite for now * fix: moved installation.mdx into folder --------- Co-authored-by: Samuel Adebayo <samuel.adebayo@engagetech.com> Co-authored-by: shadcn <m@shadcn.com>
74 lines
1.9 KiB
Plaintext
74 lines
1.9 KiB
Plaintext
---
|
||
title: Next.js
|
||
description: Learn how to install and use with 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
|
||
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
|
||
```
|
||
|
||
### App structure
|
||
|
||
Here's how I structure my app. I use Next.js, but this is not required.
|
||
|
||
```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.
|
||
|
||
</Steps>
|