Sections

Components

Utilities

Forms

Hooks

useIsMobile

Next.js

Copy Markdown

Install Shark UI in a Next.js project.

[

Use the Shark preset

Initialize a Next.js project with the Shark registry preset.

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

Use the CLI

Scaffold a new Next.js project directly from the terminal.

](#use-the-cli)[

Existing Project

Configure Shark UI manually in an existing Next.js project.

](#existing-next-project)

Use the Shark Preset#

Create Project#

Run the init command with the Shark preset and the Next.js template:

pnpmbunnpmyarn

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

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:

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

Use the CLI#

Create Project#

Run the init command to scaffold a new Next.js project and configure Shark UI:

pnpmbunnpmyarn

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

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:

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

Existing Project#

Create Project#

If you need a new Next.js project, create one with create-next-app. Otherwise, skip this step.

pnpmbunnpmyarn

pnpm dlx create-next-app@latest

Choose the recommended defaults so Tailwind CSS, the App Router, and the default @/* import alias are configured for you.

If you prefer a src/ directory, use --src-dir or choose Yes when prompted:

pnpmbunnpmyarn

pnpm dlx create-next-app@latest --src-dir

With --src-dir, Next.js places your app in src/app and configures the @/* alias to point to ./src/*.

Configure Tailwind CSS and Import Aliases#

If you created your project with the recommended create-next-app defaults, you can skip this step.

If you're adding Shark UI to an older or custom Next.js app, make sure Tailwind CSS is installed first. You can follow the official Next.js installation guide.

Then make sure your tsconfig.json includes the @/* import alias:

tsconfig.json

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

If you used --src-dir, point the alias to ./src/* instead.

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:

app/page.tsx

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

If you used --src-dir, add the component to src/app/page.tsx instead.

On This Page

Use the Shark Preset Create Project Add Components Use the CLI Create Project Add Components Existing Project Create Project Configure Tailwind CSS and Import Aliases Run the CLI Add Components