Manual Installation

Install Shark UI without the shadcn CLI by copying config and files manually.

Manual setup gives you full control over every file. Use this when the CLI does not fit your setup or you prefer to wire the project yourself.

Add Tailwind CSS

Components are styled using Tailwind CSS. Install Tailwind CSS in your project first:

Follow the Tailwind CSS installation instructions.

Add dependencies

Add the dependencies used by Shark UI components:


pnpm add @ark-ui/react tailwind-variants clsx tailwind-merge lucide-react tw-animate-css

Configure import aliases

Choose one of the following alias setups.

Option A: tsconfig.json paths

tsconfig.json


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

Option B: package.json#imports

package.json


{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}

tsconfig.json


{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "resolvePackageJsonImports": true
  }
}

The @ alias is a preference. You can use other aliases if needed. If you use package.json#imports, keep the matching alias roots in components.json.

Configure styles

Create a file styles/globals.css and follow Styling to configure the theme.

Add a cn helper

lib/utils.ts


import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

Create a components.json file

Create a components.json file in the project root so the shadcn CLI knows where to write components if you use it later.

components.json


{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@shark": "https://shark.vini.one/r/{name}.json"
  }
}

If you're using package.json#imports, use the corresponding #... aliases instead:

components.json


{
  "aliases": {
    "components": "#components",
    "utils": "#lib/utils",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks"
  }
}

Adding 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.

You can also install every component at once:


pnpm dlx shadcn@latest add @shark/ui

On This Page

Add Tailwind CSS Add dependencies Configure import aliases Option A: tsconfig.json paths Option B: package.json#imports Configure styles Add a cn helper Create a components.json file Adding components