Installation
TanStack Router
Install and configure shadcn/ui for TanStack Router.
Start by creating a new TanStack Router project:
npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
You can now start adding components to your project.
npx shadcn@canary add button
The command above will add the Button component to your project. You can then import it like this:
import { createFileRoute } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';
export const Route = createFileRoute('/')({
component: App,
});
function App() {
return (
<div>
<Button>Click me</Button>
</div>
);
}