Sections

Components

Utilities

Forms

Hooks

useIsMobile

React Router

Copy Markdown

Install Shark UI in a React Router project.

[

Use the Shark preset

Initialize a React Router project with the Shark registry preset.

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

Use the CLI

Scaffold a new React Router project directly from the terminal.

](#use-the-cli)[

Existing Project

Configure Shark UI manually in an existing React Router project.

](#existing-project)

Use the Shark Preset#

Create Project#

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t react-router

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/routes/home.tsx

import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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

Use the CLI#

Create Project#

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

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t react-router

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

pnpmbunnpmyarn

pnpm dlx shadcn@latest init @shark/style -t react-router --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:

app/routes/home.tsx

import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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

If you created a monorepo, update apps/web/app/routes/home.tsx and import from your workspace UI package instead.

Existing Project#

Create Project#

If you need a new React Router project, create one first. Otherwise, skip this step.

pnpmbunnpmyarn

pnpm dlx create-react-router@latest my-app

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/routes/home.tsx

import { Button } from "~/components/ui/button";
import type { Route } from "./+types/home";

export const meta = ({}: Route.MetaArgs) => {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
};

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

On This Page

Use the Shark Preset Create Project Add Components Use the CLI Create Project Add Components Existing Project Create Project Run the CLI Add Components