Vite

Install Shark UI in a Vite project.

Create project

Create a new Vite project:


pnpm create vite@latest.json

Add Tailwind CSS


pnpm add tailwindcss @tailwindcss/vite.json

Create a file styles/globals.css with:

styles/globals.css


@import "tailwindcss";

Edit tsconfig.json

Vite splits TypeScript config across multiple files. Add baseUrl and paths to the compilerOptions in both tsconfig.json and tsconfig.app.json:

tsconfig.json


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

Edit tsconfig.app.json

Add the same path resolution so your IDE resolves imports correctly:

tsconfig.app.json


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

Update vite.config.ts

Add the path alias so Vite resolves @/ at build time:


pnpm add -D @types/node.json

vite.config.ts


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

Run the CLI

Run the shadcn init command to set up your project:


pnpm dlx shadcn@latest init.json

The CLI creates a components.json file. When asked for base color, choose Neutral to match Shark UI defaults.

Add components

Add components from the Shark registry:


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

Import and use them:

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 Edit tsconfig.app.json Update vite.config.ts Run the CLI Add components