Sections

Components

Utilities

Forms

Hooks

useIsMobile

Vite

Copy Markdown

Install Shark UI in a Vite project.

[

Use the Shark preset

Initialize a Vite project with the Shark registry preset.

](#use-the-shark-preset)[

Use the CLI

Scaffold a new Vite project directly from the terminal.

](#use-the-cli)[

Existing Project

Configure Shark UI manually in an existing Vite project.

](#existing-project)

Use the Shark Preset#

Create Project#

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

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

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

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

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

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

You can also install every component at once:

pnpmbunnpmyarn

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.

pnpmbunnpmyarn

pnpm create vite@latest

Add Tailwind CSS#

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

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

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.

pnpmbunnpmyarn

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:

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:

pnpmbunnpmyarn

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