TanStack Router

Step 1: Initialize Your TanStack Router Project

Begin the installation process by creating a new TanStack Router project using the create-tsrouter-app command-line tool. Include the --tailwind and --add-ons shadcn flags to set up Tailwind CSS and the shadcn/ui add-on automatically:

npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn

Step 2: Integrate Individual Components

You have now completed the initial setup and are ready to begin adding individual shadcn/ui components to your TanStack Router project as needed.

npx shadcn@canary add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your TanStack Router files as demonstrated below:

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

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}