Sections

Components

Utilities

Forms

Hooks

useIsMobile

TanStack Start

Copy Markdown

Install Shark UI in a TanStack Start project.

[

Use the Shark preset

Initialize a TanStack Start project with the Shark registry preset.

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

Use the CLI

Scaffold a new TanStack Start project from the terminal.

](#use-the-cli)[

Existing Project

Configure Shark UI manually in an existing TanStack Start project.

](#existing-project)

Use the Shark Preset#

Create Project#

Run the init command with the Shark preset and the TanStack Start template:

pnpmbunnpmyarn

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

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:

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/")({
  component: App,
});

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

Use the CLI#

Create Project#

Run the init command to scaffold a new TanStack Start project and configure Shark UI:

pnpmbunnpmyarn

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

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

pnpmbunnpmyarn

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

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/")({
  component: App,
});

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

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

Existing Project#

Create Project#

If you need a new TanStack Start project, create one first. Otherwise, skip this step.

pnpmbunnpmyarn

pnpm dlx @tanstack/cli@latest create

Choose TanStack Start, the React framework, and the recommended defaults so Tailwind CSS and the @/* import alias are configured for you.

Do not add the shadcn add-on when prompted. The shadcn CLI will configure Shark UI later in this guide.

The TanStack CLI already configures Tailwind CSS and the default @/* import alias for you. If you're adding Shark UI to an older or custom TanStack Start app, make sure both are configured before continuing.

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:

src/routes/index.tsx

import { createFileRoute } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/")({
  component: App,
});

function App() {
  return (
    <div className="flex min-h-svh items-center justify-center p-6">
      <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