tanstack router
Install and configure @gentleduck/ui for TanStack Router.
Create project
npx create-tsrouter-app@latest my-app
npx create-tsrouter-app@latest my-app
Run the CLI
Run the @gentleduck/cli init command to setup your project:
npx @gentleduck/cli init
npx @gentleduck/cli init
Add Components
You can now start adding components to your project.
npx @gentleduck/cli add button
npx @gentleduck/cli add button
The command above will add the Button component to your project. You can then import it like this:
app/routes/home.tsx
import { createFileRoute } from "@tanstack/react-router"
import { Button } from "@/components/ui/button"
export const Route = createFileRoute("/")({
component: Home,
})
function Home() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
)
}app/routes/home.tsx
import { createFileRoute } from "@tanstack/react-router"
import { Button } from "@/components/ui/button"
export const Route = createFileRoute("/")({
component: Home,
})
function Home() {
return (
<div className="flex min-h-svh flex-col items-center justify-center">
<Button>Click me</Button>
</div>
)
}