mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-03 01:18:38 +00:00
86 lines
2.2 KiB
Plaintext
86 lines
2.2 KiB
Plaintext
---
|
||
title: Installation
|
||
description: How to install dependencies and structure your app.
|
||
---
|
||
|
||
## 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>
|
||
|
||
That's it. You can now start adding components to your project.
|
||
|
||
```bash
|
||
npx shadcn-ui@latest add
|
||
```
|
||
|
||
## Other frameworks
|
||
|
||
I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by [opening an PR](https://github.com/shadcn/ui).
|