> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Vite

> 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">
  **Starting fresh?** Use [shadcn/create](/create) to save time. It handles Tailwind, TypeScript, and path alias configuration for you, plus custom themes and presets.
</Callout>

<Steps>
  ### Create project

  Start by creating a new React project using `vite`. Select the **React + TypeScript** template:

  ```bash theme={null}
  npm create vite@latest
  ```

  ### Add Tailwind CSS

  ```bash theme={null}
  npm install tailwindcss @tailwindcss/vite
  ```

  Replace everything in `src/index.css` with the following:

  ```css title="src/index.css" theme={null}
  @import "tailwindcss";
  ```

  ### Edit tsconfig.json file

  The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
  Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
  `tsconfig.app.json` files:

  ```ts title="tsconfig.json" {11-16} showLineNumbers theme={null}
  {
    "files": [],
    "references": [
      {
        "path": "./tsconfig.app.json"
      },
      {
        "path": "./tsconfig.node.json"
      }
    ],
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["./src/*"]
      }
    }
  }
  ```

  ### Edit tsconfig.app.json file

  Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:

  ```ts title="tsconfig.app.json" {4-9} showLineNumbers theme={null}
  {
    "compilerOptions": {
      // ...
      "baseUrl": ".",
      "paths": {
        "@/*": [
          "./src/*"
        ]
      }
      // ...
    }
  }
  ```

  ### Update vite.config.ts

  Add the following code to the vite.config.ts so your app can resolve paths without error:

  ```bash theme={null}
  npm install -D @types/node
  ```

  ```typescript title="vite.config.ts" showLineNumbers {1,2,8-13} theme={null}
  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 setup your project:

  ```bash theme={null}
  npx shadcn@latest init
  ```

  You will be asked a few questions to configure `components.json`.

  ```txt theme={null}
  Which color would you like to use as base color? › Neutral
  ```

  ### Add Components

  You can now start adding components to your project.

  ```bash theme={null}
  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="src/App.tsx" theme={null}
  import { Button } from "@/components/ui/button"

  function App() {
    return (
      <div className="flex min-h-svh flex-col items-center justify-center">
        <Button>Click me</Button>
      </div>
    )
  }

  export default App
  ```
</Steps>