Vite

Instructions to install Shark UI in a Vite project

Create project

To create a new Vite project, you can use the following command:


pnpm create vite@latest

Add Tailwind CSS


pnpm add tailwindcss @tailwindcss/vite

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

src/index.css


@import "tailwindcss";

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:

tsconfig.json


{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": { // [!code highlight]
    "baseUrl": ".", // [!code highlight]
    "paths": { // [!code highlight]
      "@/*": ["./src/*"] // [!code highlight]
    } // [!code highlight]
  } // [!code highlight]
}

Edit tsconfig.app.json file

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

tsconfig.app.json


{
  "compilerOptions": {
    // ...
    "baseUrl": ".", // [!code highlight]
    "paths": { // [!code highlight]
      "@/*": [ // [!code highlight]
        "./src/*" // [!code highlight]
      ] // [!code highlight] 
    } // [!code highlight]
    // ...
  }
}

Update vite.config.ts

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


pnpm add -D @types/node

vite.config.ts


import path from "path" // [!code highlight]
import tailwindcss from "@tailwindcss/vite" // [!code highlight]
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()], // [!code highlight]
  resolve: { // [!code highlight]
    alias: { // [!code highlight]
      "@": path.resolve(__dirname, "./src"), // [!code highlight]
    }, // [!code highlight]
  }, // [!code highlight]
})

Run the CLI

Run the shadcn init command to setup your project:


pnpm dlx shadcn@latest init

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


Which color would you like to use as base color? › Neutral

Add Components

You can now start adding components to your project.


pnpm dlx shadcn@latest add https://shark.vini.one/r/button.json

The command above will add the Button component to your project. You can then import it like this:

src/App.tsx


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

On This Page

Create project Add Tailwind CSS Edit tsconfig.json file Edit tsconfig.app.json file Update vite.config.ts Run the CLI Add Components