Sections

Utilities

Forms

Hooks

useIsMobileNew

React Router

Install Shark UI in a React Router project.

Use the Shark preset

Initialize a React Router project with the Shark registry preset.

Use the CLI

Scaffold a new React Router project directly from the terminal.

Existing Project

Configure Shark UI manually in an existing React Router project.

Use the Shark Preset

Create Project


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:


pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:


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:


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

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


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:


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:


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

You can also install every component at once:


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.


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.


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:


pnpm dlx shadcn@latest add @shark/button

You can also install every component at once:


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