Sections

Utilities

Forms

Hooks

useIsMobileNew

Vite

Install Shark UI in a Vite project.

Use the Shark preset

Initialize a Vite project with the Shark registry preset.

Use the CLI

Scaffold a new Vite project directly from the terminal.

Existing Project

Configure Shark UI manually in an existing Vite project.

Use the Shark Preset

Create Project

Run the init command with the Shark preset and the Vite template:


pnpm dlx shadcn@latest init @shark/style -t vite

Add Components

You can add components with the CLI or copy them manually from the component docs:

CLI: Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:


pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:


pnpm dlx shadcn@latest add @shark/ui

Then import and use components 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;

Use the CLI

Create Project

Run the init command to scaffold a new Vite project and configure Shark UI:


pnpm dlx shadcn@latest init @shark/style -t vite

For a monorepo project, use the --monorepo flag:


pnpm dlx shadcn@latest init @shark/style -t vite --monorepo

Add Components

You can add components with the CLI or copy them manually from the component docs:

CLI: Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:


pnpm dlx shadcn@latest add @shark/button

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:


pnpm dlx shadcn@latest add @shark/button -c apps/web

You can also install every component at once:


pnpm dlx shadcn@latest add @shark/ui

Then import and use components 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;

If you created a monorepo, update apps/web/src/App.tsx and import from your workspace UI package 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.


pnpm create vite@latest

Add Tailwind CSS

If your project already has Tailwind CSS configured, skip this step.


pnpm add tailwindcss @tailwindcss/vite

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

src/index.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

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 with the Shark preset to set up your project.


pnpm dlx shadcn@latest init @shark/style

Add Components

You can add components with the CLI or copy them manually from the component docs:

CLI: Run npx shadcn@latest add @shark/<component> (e.g. button, dialog).
Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:


pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:


pnpm dlx shadcn@latest add @shark/ui

Then import and use components 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

Use the Shark Preset Create Project Add Components Use the CLI Create Project Add Components Existing Project Create Project Add Tailwind CSS Edit tsconfig.json Edit tsconfig.app.json Update vite.config.ts Run the CLI Add Components