mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-11 09:51:40 +00:00
docs: rewrite installation docs (#10172)
This commit is contained in:
shadcn
GitHub
@@ -1,5 +1,6 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/registry/new-york-v4/ui/button"
|
||||
|
||||
export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
@@ -19,7 +20,7 @@ export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
|
||||
Vercel provides tools and infrastructure to deploy apps and features at
|
||||
scale.
|
||||
</div>
|
||||
<Button size="sm" className="mt-2 w-fit">
|
||||
<Button variant="outline" size="sm" className="mt-2 w-fit">
|
||||
Deploy Now
|
||||
</Button>
|
||||
<a
|
||||
|
||||
@@ -3,17 +3,125 @@ title: Astro
|
||||
description: Install and configure shadcn/ui for Astro.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) for a fully configured Astro app with custom themes, Base UI or Radix, and icon libraries.
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#scaffold-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset and generate an Astro project command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#scaffold-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a new Astro project directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-astro-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui manually in an existing Astro project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
</Callout>
|
||||
<div id="scaffold-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create project
|
||||
### Build Your Preset
|
||||
|
||||
Start by creating a new Astro project:
|
||||
Open [shadcn/create](/create?template=astro) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=astro"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Create Project
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template astro
|
||||
```
|
||||
|
||||
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```astro title="src/pages/index.astro" showLineNumbers
|
||||
---
|
||||
import Layout from "@/layouts/main.astro"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Astro app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/pages/index.astro` and import from `@workspace/ui/components/card` instead. The monorepo layout at `apps/web/src/layouts/main.astro` already imports `@workspace/ui/globals.css` for you.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Run the `init` command to scaffold a new Astro project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t astro
|
||||
@@ -27,6 +135,99 @@ npx shadcn@latest init -t astro --monorepo
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```astro title="src/pages/index.astro" showLineNumbers
|
||||
---
|
||||
import Layout from "@/layouts/main.astro"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Astro app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/pages/index.astro` and import from `@workspace/ui/components/card` instead. The monorepo layout at `apps/web/src/layouts/main.astro` already imports `@workspace/ui/globals.css` for you.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="existing-astro-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
If you need a new Astro project, create one first. Otherwise, skip this step.
|
||||
|
||||
```bash
|
||||
npm create astro@latest astro-app -- --template with-tailwindcss --install --add react --git
|
||||
```
|
||||
|
||||
This command sets up Tailwind CSS and the React integration for you. If you're adding shadcn/ui to an older or custom Astro app, make sure both are configured before continuing.
|
||||
|
||||
The Tailwind starter loads your global stylesheet through `src/layouts/main.astro`. Keep that layout in place, or make sure your page imports `@/styles/global.css`.
|
||||
|
||||
### Edit tsconfig.json file
|
||||
|
||||
If your project already has the `@/*` alias configured, skip this step.
|
||||
|
||||
Add the following code to the `tsconfig.json` file to resolve paths:
|
||||
|
||||
```ts title="tsconfig.json" {4-9} showLineNumbers
|
||||
{
|
||||
"compilerOptions": {
|
||||
// ...
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command to set up your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
|
||||
```bash
|
||||
@@ -35,26 +236,17 @@ npx shadcn@latest add button
|
||||
|
||||
The command above will add the `Button` component to your project. You can then import it like this:
|
||||
|
||||
```astro title="src/pages/index.astro" {2,16} showLineNumbers
|
||||
```astro title="src/pages/index.astro" showLineNumbers
|
||||
---
|
||||
import Layout from "@/layouts/main.astro"
|
||||
import { Button } from "@/components/ui/button"
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro + Tailwind CSS</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="grid place-items-center h-screen content-center">
|
||||
<Button>Button</Button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<Layout>
|
||||
<div class="grid h-screen place-items-center content-center">
|
||||
<Button>Button</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -5,23 +5,80 @@ description: How to install dependencies and structure your app.
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) to scaffold a complete app with custom themes, components, and presets. For Next.js, Vite, Laravel, React Router, Astro, and TanStack Start.
|
||||
**Recommended for new projects:** Use [shadcn/create](/create) to build your preset visually and generate the right setup command for your framework.
|
||||
|
||||
</Callout>
|
||||
|
||||
## Quick Start
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
Run the following command to create a new project with shadcn/ui:
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#use-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset visually and generate a setup command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard href="#use-cli" className="items-start gap-1 p-6 text-sm md:p-6">
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a supported template directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Add shadcn/ui to an app you already created.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
<div id="use-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
Build your preset visually, preview your choices, and generate a framework-specific setup command.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
Available for Next.js, Vite, Laravel, React Router, Astro, and TanStack Start.
|
||||
|
||||
<div id="use-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
Use the CLI to scaffold a new project directly from the terminal:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
npx shadcn@latest init -t [framework]
|
||||
```
|
||||
|
||||
This will guide you through the process of creating a new project with shadcn/ui with your preferred framework, icon library, and theme.
|
||||
Supported templates: `next`, `vite`, `start`, `react-router`, and `astro`.
|
||||
|
||||
## Pick Your Framework
|
||||
For Laravel, create the app first with `laravel new`, then run `npx shadcn@latest init`.
|
||||
|
||||
Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app. shadcn/ui is built to work with all React frameworks.
|
||||
<div id="existing-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
Each framework guide includes an `Existing Project` section with the manual setup steps for that framework.
|
||||
|
||||
Pick your framework below and follow that path.
|
||||
|
||||
## Choose Your Framework
|
||||
|
||||
For Laravel, start with `laravel new` before using `shadcn/create` or `shadcn init`.
|
||||
|
||||
<div className="mt-8 grid gap-4 sm:grid-cols-2 sm:gap-6">
|
||||
<LinkedCard href="/docs/installation/next">
|
||||
|
||||
@@ -3,35 +3,88 @@ title: Laravel
|
||||
description: Install and configure shadcn/ui for Laravel.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) for a fully configured Laravel app with custom themes, Base UI or Radix, and icon libraries.
|
||||
|
||||
</Callout>
|
||||
The shadcn CLI does not scaffold a new Laravel app. Start by creating a Laravel app with the React starter kit, then choose how you want to configure shadcn/ui.
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Start by creating a new Laravel project with Inertia and React using the Laravel installer:
|
||||
Create a new Laravel app using the Laravel installer:
|
||||
|
||||
```bash
|
||||
laravel new my-app --react
|
||||
laravel new my-app
|
||||
```
|
||||
|
||||
### Run the shadcn/ui CLI
|
||||
If you already have a Laravel app with React and Inertia configured, skip this step.
|
||||
|
||||
Run the `init` command to configure shadcn/ui in your Laravel project:
|
||||
Choose the **React** starter kit when prompted. For more information, see the official [Laravel frontend documentation](https://laravel.com/docs/12.x/frontend).
|
||||
|
||||
Then move into your project directory:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --force
|
||||
cd my-app
|
||||
```
|
||||
|
||||
If asked to overwrite the existing components, answer `y` to continue.
|
||||
</Steps>
|
||||
|
||||
<div className="mt-10 grid gap-4 sm:grid-cols-2 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#configure-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset visually and generate a Laravel init command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#configure-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui in your Laravel app directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
<div id="configure-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Build Your Preset
|
||||
|
||||
Open [shadcn/create](/create?template=laravel) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=laravel"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Run the Command
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template laravel
|
||||
```
|
||||
|
||||
Run the command from the root of your Laravel app.
|
||||
|
||||
When asked to overwrite `components.json` and components, choose `Yes`.
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
Add the `Switch` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add switch
|
||||
@@ -39,7 +92,48 @@ npx shadcn@latest add switch
|
||||
|
||||
The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
|
||||
|
||||
```tsx title="resources/js/pages/index.tsx" {1,6} showLineNumbers
|
||||
```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
const MyPage = () => {
|
||||
return (
|
||||
<div>
|
||||
<Switch />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyPage
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="configure-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command from the root of your Laravel app:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
When asked to overwrite `components.json` and components, choose `Yes`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Switch` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add switch
|
||||
```
|
||||
|
||||
The command above will add the `Switch` component to `resources/js/components/ui/switch.tsx`. You can then import it like this:
|
||||
|
||||
```tsx title="resources/js/pages/index.tsx" showLineNumbers {1,6}
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
|
||||
const MyPage = () => {
|
||||
|
||||
@@ -3,17 +3,124 @@ title: Next.js
|
||||
description: Install and configure shadcn/ui for Next.js.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) for a fully configured Next.js app with custom themes, Base UI or Radix, and icon libraries.
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#scaffold-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset and generate a Next.js project command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#scaffold-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a new Next.js project directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-next-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui manually in an existing Next.js project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
</Callout>
|
||||
<div id="scaffold-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Build Your Preset
|
||||
|
||||
Open [shadcn/create](/create?template=next) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=next"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Create Project
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template next
|
||||
```
|
||||
|
||||
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="app/page.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Next.js app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/app/page.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Run the `init` command to create a new Next.js project or to set up an existing one:
|
||||
Run the `init` command to scaffold a new Next.js project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t next
|
||||
@@ -27,6 +134,103 @@ npx shadcn@latest init -t next --monorepo
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="app/page.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Next.js app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/app/page.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="existing-next-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
If you need a new Next.js project, create one with `create-next-app`. Otherwise, skip this step.
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest
|
||||
```
|
||||
|
||||
Choose the recommended defaults so Tailwind CSS, the App Router, and the default `@/*` import alias are configured for you.
|
||||
|
||||
If you prefer a `src/` directory, use `--src-dir` or choose `Yes` when prompted:
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest --src-dir
|
||||
```
|
||||
|
||||
With `--src-dir`, Next.js places your app in `src/app` and configures the `@/*` alias to point to `./src/*`.
|
||||
|
||||
### Configure Tailwind CSS and Import Aliases
|
||||
|
||||
If you created your project with the recommended `create-next-app` defaults, you can skip this step.
|
||||
|
||||
If you're adding shadcn/ui to an older or custom Next.js app, make sure Tailwind CSS is installed first. You can follow the official [Next.js installation guide](https://nextjs.org/docs/app/getting-started).
|
||||
|
||||
Then make sure your `tsconfig.json` includes the `@/*` import alias:
|
||||
|
||||
```json title="tsconfig.json" showLineNumbers
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you used `--src-dir`, point the alias to `./src/*` instead.
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command to set up shadcn/ui in your project.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
|
||||
```bash
|
||||
@@ -35,16 +239,18 @@ 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 title="app/page.tsx"
|
||||
```tsx showLineNumbers title="app/page.tsx"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex min-h-svh items-center justify-center">
|
||||
<Button>Click me</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you used `--src-dir`, add the component to `src/app/page.tsx` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -3,15 +3,124 @@ title: React Router
|
||||
description: Install and configure shadcn/ui for React Router.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) for a fully configured React Router app with custom themes, Base UI or Radix, and icon libraries.
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#scaffold-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset and generate a React Router project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#scaffold-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a new React Router project directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-react-router-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui manually in an existing React Router project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
</Callout>
|
||||
<div id="scaffold-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create project
|
||||
### Build Your Preset
|
||||
|
||||
Open [shadcn/create](/create?template=react-router) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=react-router"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Create Project
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template react-router
|
||||
```
|
||||
|
||||
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="app/routes/home.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your React Router app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/app/routes/home.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Run the `init` command to scaffold a new React Router project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t react-router
|
||||
@@ -25,6 +134,75 @@ npx shadcn@latest init -t react-router --monorepo
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="app/routes/home.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your React Router app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/app/routes/home.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="existing-react-router-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
If you need a new React Router project, create one first. Otherwise, skip this step.
|
||||
|
||||
```bash
|
||||
npm create react-router@latest
|
||||
```
|
||||
|
||||
`create-react-router` already configures Tailwind CSS and the default `~/*` import alias for you. If you're adding shadcn/ui to an older or custom React Router app, make sure both are configured before continuing.
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command to set up shadcn/ui in your project.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
|
||||
```bash
|
||||
@@ -34,16 +212,7 @@ npx shadcn@latest add button
|
||||
The command above will add the `Button` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="app/routes/home.tsx"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
import type { Route } from "./+types/home"
|
||||
|
||||
export function meta({}: Route.MetaArgs) {
|
||||
return [
|
||||
{ title: "New React Router App" },
|
||||
{ name: "description", content: "Welcome to React Router!" },
|
||||
]
|
||||
}
|
||||
import { Button } from "~/components/ui/button"
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
||||
@@ -3,17 +3,130 @@ title: TanStack Start
|
||||
description: Install and configure shadcn/ui for TanStack Start.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
**Starting a new project?** Use [shadcn/create](/create) for a fully configured TanStack Start app with custom themes, Base UI or Radix, and icon libraries.
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#scaffold-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset and generate a TanStack project command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#scaffold-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a new TanStack project from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-start-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui manually in an existing TanStack project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
</Callout>
|
||||
<div id="scaffold-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create project
|
||||
### Build Your Preset
|
||||
|
||||
Run the following command to create a new TanStack Start project with shadcn/ui:
|
||||
Open [shadcn/create](/create?template=start) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=start"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Create Project
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template start
|
||||
```
|
||||
|
||||
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="src/routes/index.tsx"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: App,
|
||||
})
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your TanStack Start app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/routes/index.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Run the `init` command to scaffold a new TanStack Start project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t start
|
||||
@@ -27,6 +140,89 @@ npx shadcn@latest init -t start --monorepo
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="src/routes/index.tsx"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: App,
|
||||
})
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your TanStack Start app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/routes/index.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="existing-start-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
If you need a new TanStack Start project, create one first. Otherwise, skip this step.
|
||||
|
||||
```bash
|
||||
npx @tanstack/cli@latest create
|
||||
```
|
||||
|
||||
Choose TanStack Start, the React framework, and the recommended defaults so Tailwind CSS and the `@/*` import alias are configured for you.
|
||||
|
||||
<Callout className="mt-6">
|
||||
|
||||
Do not add the `shadcn` add-on when prompted. The `shadcn` CLI will configure shadcn/ui later in this guide.
|
||||
|
||||
</Callout>
|
||||
|
||||
The TanStack CLI already configures Tailwind CSS and the default `@/*` import alias for you. If you're adding shadcn/ui to an older or custom TanStack Start app, make sure both are configured before continuing.
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command to set up shadcn/ui in your project.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
|
||||
```bash
|
||||
@@ -35,12 +231,18 @@ npx shadcn@latest add button
|
||||
|
||||
The command above will add the `Button` component to your project. You can then import it like this:
|
||||
|
||||
```tsx title="app/routes/index.tsx" showLineNumbers {1,6}
|
||||
```tsx showLineNumbers title="src/routes/index.tsx"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: App,
|
||||
})
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex min-h-svh items-center justify-center p-6">
|
||||
<Button>Click me</Button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -3,17 +3,126 @@ title: Vite
|
||||
description: Install and configure shadcn/ui for Vite.
|
||||
---
|
||||
|
||||
<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
|
||||
Choose the setup that matches your starting point.
|
||||
|
||||
**Starting fresh?** Use [shadcn/create](/create) to configure a Vite project with custom themes, Base UI or Radix, and icon libraries.
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-3 sm:gap-6">
|
||||
<LinkedCard
|
||||
href="#scaffold-with-create"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use shadcn/create</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Build your preset and generate a Vite project command.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#scaffold-with-cli"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Use the CLI</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Scaffold a new Vite project directly from the terminal.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
<LinkedCard
|
||||
href="#existing-vite-project"
|
||||
className="items-start gap-1 p-6 text-sm md:p-6"
|
||||
>
|
||||
<div className="font-medium">Existing Project</div>
|
||||
<div className="leading-relaxed text-muted-foreground">
|
||||
Configure shadcn/ui manually in an existing Vite project.
|
||||
</div>
|
||||
</LinkedCard>
|
||||
</div>
|
||||
|
||||
</Callout>
|
||||
<div id="scaffold-with-create" className="scroll-mt-24" />
|
||||
## Use shadcn/create
|
||||
|
||||
<Steps>
|
||||
|
||||
### Build Your Preset
|
||||
|
||||
Open [shadcn/create](/create?template=vite) and build your preset visually. Choose your style, colors, fonts, icons, and more.
|
||||
|
||||
<Button asChild size="sm">
|
||||
<Link
|
||||
href="/create?template=vite"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 no-underline!"
|
||||
>
|
||||
Open shadcn/create
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
### Create Project
|
||||
|
||||
Click `Create Project`, choose your package manager, and copy the generated command.
|
||||
|
||||
The generated command will look similar to this:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init --preset [CODE] --template vite
|
||||
```
|
||||
|
||||
The exact command will include your selected options such as `--base`, `--monorepo`, or `--rtl`.
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="src/App.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Vite app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="scaffold-with-cli" className="scroll-mt-24" />
|
||||
## Use the CLI
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
Run the `init` command to create a new Vite project or to set up an existing one:
|
||||
Run the `init` command to scaffold a new Vite project. Follow the prompts to configure your project: base, preset, monorepo, and more.
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t vite
|
||||
@@ -27,6 +136,159 @@ npx shadcn@latest init -t vite --monorepo
|
||||
|
||||
### Add Components
|
||||
|
||||
Add the `Card` component to your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card
|
||||
```
|
||||
|
||||
If you created a monorepo, run the command from `apps/web` or specify the workspace from the repo root:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add card -c apps/web
|
||||
```
|
||||
|
||||
The command above will add the `Card` component to your project. You can then import it like this:
|
||||
|
||||
```tsx showLineNumbers title="src/App.tsx"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Card className="max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Project Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Track progress and recent activity for your Vite app.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
Your design system is ready. Start building your next component.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead.
|
||||
|
||||
</Steps>
|
||||
|
||||
<div id="existing-vite-project" className="scroll-mt-24" />
|
||||
## Existing Project
|
||||
|
||||
<Steps>
|
||||
|
||||
### Create Project
|
||||
|
||||
If you need a new Vite project, create one first and select the **React + TypeScript** template. Otherwise, skip this step.
|
||||
|
||||
```bash
|
||||
npm create vite@latest
|
||||
```
|
||||
|
||||
### Add Tailwind CSS
|
||||
|
||||
If your project already has Tailwind CSS configured, skip this step.
|
||||
|
||||
```bash
|
||||
npm install tailwindcss @tailwindcss/vite
|
||||
```
|
||||
|
||||
Replace everything in `src/index.css` with the following:
|
||||
|
||||
```css title="src/index.css"
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
### Edit tsconfig.json file
|
||||
|
||||
If your project already has the `@/*` alias configured, skip this step.
|
||||
|
||||
Vite splits TypeScript configuration across multiple files. Add the `baseUrl` and `paths` properties to the `compilerOptions` section of `tsconfig.json` and `tsconfig.app.json`:
|
||||
|
||||
```ts title="tsconfig.json" {11-16} showLineNumbers
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Edit tsconfig.app.json file
|
||||
|
||||
Add the same alias to `tsconfig.app.json` so your editor can resolve imports:
|
||||
|
||||
```ts title="tsconfig.app.json" {4-9} showLineNumbers
|
||||
{
|
||||
"compilerOptions": {
|
||||
// ...
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
// ...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Update vite.config.ts
|
||||
|
||||
Install `@types/node` and update `vite.config.ts` so Vite can resolve the `@` alias:
|
||||
|
||||
```bash
|
||||
npm install -D @types/node
|
||||
```
|
||||
|
||||
```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
|
||||
import path from "path"
|
||||
import tailwindcss from "@tailwindcss/vite"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import { defineConfig } from "vite"
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Run the CLI
|
||||
|
||||
Run the `shadcn` init command to set up shadcn/ui in your project:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
You can now start adding components to your project.
|
||||
|
||||
```bash
|
||||
@@ -35,16 +297,18 @@ 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 title="src/App.tsx"
|
||||
```tsx showLineNumbers title="src/App.tsx"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function App() {
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex min-h-svh flex-col items-center justify-center">
|
||||
<Button>Click me</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
</Steps>
|
||||
|
||||
@@ -22,9 +22,7 @@ export const transformers = [
|
||||
node.properties["__yarn__"] = raw.replace("npm install", "yarn add")
|
||||
node.properties["__pnpm__"] = raw.replace("npm install", "pnpm add")
|
||||
node.properties["__bun__"] = raw.replace("npm install", "bun add")
|
||||
}
|
||||
|
||||
if (raw.startsWith("npx create-")) {
|
||||
} else if (raw.startsWith("npx create-")) {
|
||||
node.properties["__npm__"] = raw
|
||||
node.properties["__yarn__"] = raw.replace(
|
||||
"npx create-",
|
||||
@@ -35,26 +33,20 @@ export const transformers = [
|
||||
"pnpm create "
|
||||
)
|
||||
node.properties["__bun__"] = raw.replace("npx", "bunx --bun")
|
||||
}
|
||||
|
||||
// npm create.
|
||||
if (raw.startsWith("npm create")) {
|
||||
} else if (raw.startsWith("npm create")) {
|
||||
// npm create.
|
||||
node.properties["__npm__"] = raw
|
||||
node.properties["__yarn__"] = raw.replace("npm create", "yarn create")
|
||||
node.properties["__pnpm__"] = raw.replace("npm create", "pnpm create")
|
||||
node.properties["__bun__"] = raw.replace("npm create", "bun create")
|
||||
}
|
||||
|
||||
// npx.
|
||||
if (raw.startsWith("npx")) {
|
||||
} else if (raw.startsWith("npx")) {
|
||||
// npx.
|
||||
node.properties["__npm__"] = raw
|
||||
node.properties["__yarn__"] = raw.replace("npx", "yarn")
|
||||
node.properties["__yarn__"] = raw.replace("npx", "yarn dlx")
|
||||
node.properties["__pnpm__"] = raw.replace("npx", "pnpm dlx")
|
||||
node.properties["__bun__"] = raw.replace("npx", "bunx --bun")
|
||||
}
|
||||
|
||||
// npm run.
|
||||
if (raw.startsWith("npm run")) {
|
||||
} else if (raw.startsWith("npm run")) {
|
||||
// npm run.
|
||||
node.properties["__npm__"] = raw
|
||||
node.properties["__yarn__"] = raw.replace("npm run", "yarn")
|
||||
node.properties["__pnpm__"] = raw.replace("npm run", "pnpm")
|
||||
|
||||
Reference in New Issue
Block a user