Sections

Components

Utilities

Forms

Hooks

useIsMobile

Manual Installation

Copy Markdown

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:

pnpmbunnpmyarn

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