diff --git a/apps/v4/components/open-in-v0-cta.tsx b/apps/v4/components/open-in-v0-cta.tsx index b288015c5b..67f5e4420c 100644 --- a/apps/v4/components/open-in-v0-cta.tsx +++ b/apps/v4/components/open-in-v0-cta.tsx @@ -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. - +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. +
+ +
Use shadcn/create
+
+ Build your preset and generate an Astro project command. +
+ + +
Use the CLI
+
+ Scaffold a new Astro project directly from the terminal. +
+ + +
Existing Project
+
+ Configure shadcn/ui manually in an existing Astro project. +
+ +
- +
+## Use shadcn/create -### 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. + + + +### 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" +--- + + + + + Project Overview + + Track progress and recent activity for your Astro app. + + + + Your design system is ready. Start building your next component. + + + +``` + +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. + + + +
+## Use the CLI + + + +### 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" +--- + + + + + Project Overview + + Track progress and recent activity for your Astro app. + + + + Your design system is ready. Start building your next component. + + + +``` + +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. + + + +
+## Existing Project + + + +### 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" --- - - - - - - - Astro + Tailwind CSS - - - -
- -
- - + +
+ +
+ ``` diff --git a/apps/v4/content/docs/installation/index.mdx b/apps/v4/content/docs/installation/index.mdx index 781dfd871a..a8f29e16bb 100644 --- a/apps/v4/content/docs/installation/index.mdx +++ b/apps/v4/content/docs/installation/index.mdx @@ -5,23 +5,80 @@ description: How to install dependencies and structure your app. -**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. -## Quick Start +Choose the setup that matches your starting point. -Run the following command to create a new project with shadcn/ui: +
+ +
Use shadcn/create
+
+ Build your preset visually and generate a setup command. +
+ + +
Use the CLI
+
+ Scaffold a supported template directly from the terminal. +
+ + +
Existing Project
+
+ Add shadcn/ui to an app you already created. +
+ +
+ +
+## Use shadcn/create + +Build your preset visually, preview your choices, and generate a framework-specific setup command. + + + +Available for Next.js, Vite, Laravel, React Router, Astro, and TanStack Start. + +
+## 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. +
+## 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`.
diff --git a/apps/v4/content/docs/installation/laravel.mdx b/apps/v4/content/docs/installation/laravel.mdx index 6b5f8b857e..d1ddaa032d 100644 --- a/apps/v4/content/docs/installation/laravel.mdx +++ b/apps/v4/content/docs/installation/laravel.mdx @@ -3,35 +3,88 @@ title: Laravel description: Install and configure shadcn/ui for Laravel. --- - - -**Starting a new project?** Use [shadcn/create](/create) for a fully configured Laravel app with custom themes, Base UI or Radix, and icon libraries. - - +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. ### 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. + + +
+ +
Use shadcn/create
+
+ Build your preset visually and generate a Laravel init command. +
+ + +
Use the CLI
+
+ Configure shadcn/ui in your Laravel app directly from the terminal. +
+ +
+ +
+## Use shadcn/create + + + +### Build Your Preset + +Open [shadcn/create](/create?template=laravel) and build your preset visually. Choose your style, colors, fonts, icons, and more. + + + +### 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 ( +
+ +
+ ) +} + +export default MyPage +``` + + + +
+## Use the CLI + + + +### 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 = () => { diff --git a/apps/v4/content/docs/installation/next.mdx b/apps/v4/content/docs/installation/next.mdx index 0ca74ebd0a..8a621a20e7 100644 --- a/apps/v4/content/docs/installation/next.mdx +++ b/apps/v4/content/docs/installation/next.mdx @@ -3,17 +3,124 @@ title: Next.js description: Install and configure shadcn/ui for Next.js. --- - +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. +
+ +
Use shadcn/create
+
+ Build your preset and generate a Next.js project command. +
+ + +
Use the CLI
+
+ Scaffold a new Next.js project directly from the terminal. +
+ + +
Existing Project
+
+ Configure shadcn/ui manually in an existing Next.js project. +
+ +
- +
+## Use shadcn/create + + + +### Build Your Preset + +Open [shadcn/create](/create?template=next) and build your preset visually. Choose your style, colors, fonts, icons, and more. + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your Next.js app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/app/page.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Use the CLI ### 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 ( + + + Project Overview + + Track progress and recent activity for your Next.js app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/app/page.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Existing Project + + + +### 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 ( -
+
) } ``` +If you used `--src-dir`, add the component to `src/app/page.tsx` instead. + diff --git a/apps/v4/content/docs/installation/react-router.mdx b/apps/v4/content/docs/installation/react-router.mdx index 2c6eb4ac39..b8b9a66dc0 100644 --- a/apps/v4/content/docs/installation/react-router.mdx +++ b/apps/v4/content/docs/installation/react-router.mdx @@ -3,15 +3,124 @@ title: React Router description: Install and configure shadcn/ui for React Router. --- - +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. +
+ +
Use shadcn/create
+
+ Build your preset and generate a React Router project. +
+ + +
Use the CLI
+
+ Scaffold a new React Router project directly from the terminal. +
+ + +
Existing Project
+
+ Configure shadcn/ui manually in an existing React Router project. +
+ +
- +
+## Use shadcn/create -### 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. + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your React Router app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/app/routes/home.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Use the CLI + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your React Router app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/app/routes/home.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Existing Project + + + +### 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 ( diff --git a/apps/v4/content/docs/installation/tanstack.mdx b/apps/v4/content/docs/installation/tanstack.mdx index 8d6ed917ab..58b86bf935 100644 --- a/apps/v4/content/docs/installation/tanstack.mdx +++ b/apps/v4/content/docs/installation/tanstack.mdx @@ -3,17 +3,130 @@ title: TanStack Start description: Install and configure shadcn/ui for TanStack Start. --- - +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. +
+ +
Use shadcn/create
+
+ Build your preset and generate a TanStack project command. +
+ + +
Use the CLI
+
+ Scaffold a new TanStack project from the terminal. +
+ + +
Existing Project
+
+ Configure shadcn/ui manually in an existing TanStack project. +
+ +
- +
+## Use shadcn/create -### 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. + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your TanStack Start app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/src/routes/index.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Use the CLI + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your TanStack Start app. + + + + Your design system is ready. Start building your next component. + + + ) +} +``` + +If you created a monorepo, update `apps/web/src/routes/index.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Existing Project + + + +### 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. + + + +Do not add the `shadcn` add-on when prompted. The `shadcn` CLI will configure shadcn/ui later in this guide. + + + +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 ( -
+
) diff --git a/apps/v4/content/docs/installation/vite.mdx b/apps/v4/content/docs/installation/vite.mdx index c6ed8f4786..00edf832f0 100644 --- a/apps/v4/content/docs/installation/vite.mdx +++ b/apps/v4/content/docs/installation/vite.mdx @@ -3,17 +3,126 @@ title: Vite description: Install and configure shadcn/ui for Vite. --- - +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. +
+ +
Use shadcn/create
+
+ Build your preset and generate a Vite project command. +
+ + +
Use the CLI
+
+ Scaffold a new Vite project directly from the terminal. +
+ + +
Existing Project
+
+ Configure shadcn/ui manually in an existing Vite project. +
+ +
- +
+## Use shadcn/create + + + +### Build Your Preset + +Open [shadcn/create](/create?template=vite) and build your preset visually. Choose your style, colors, fonts, icons, and more. + + + +### 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 ( + + + Project Overview + + Track progress and recent activity for your Vite app. + + + + Your design system is ready. Start building your next component. + + + ) +} + +export default App +``` + +If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Use the CLI ### 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 ( + + + Project Overview + + Track progress and recent activity for your Vite app. + + + + Your design system is ready. Start building your next component. + + + ) +} + +export default App +``` + +If you created a monorepo, update `apps/web/src/App.tsx` and import from `@workspace/ui/components/card` instead. + + + +
+## Existing Project + + + +### 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 ( -
+
) } + +export default App ``` diff --git a/apps/v4/lib/highlight-code.ts b/apps/v4/lib/highlight-code.ts index c8ef1190d5..ffb0ad84b1 100644 --- a/apps/v4/lib/highlight-code.ts +++ b/apps/v4/lib/highlight-code.ts @@ -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")