TanStack Start

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:

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>
  );
}

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:

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.

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:

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>
  );
}