{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"TanStack Router","description":"Set up Intent UI in a TanStack Router project with Tailwind CSS.","url":"https://intentui.com/docs/getting-started/tanstack-router","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/getting-started/tanstack-router"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Getting started","item":"https://intentui.com/docs/getting-started"},{"@type":"ListItem","position":4,"name":"TanStack Router","item":"https://intentui.com/docs/getting-started/tanstack-router"}]}]}
TanStack Router
Installation
Start a new project with the following command:
npm
pnpm
yarn
bun
npx create-tsrouter-app@latest app --template file-router --tailwind
Next, initialize in your project:
npm
pnpm
yarn
bun
npx shadcn@latest init @intentui/theme-default
Adding components
Add Intent UI components to your project with the following command:
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/text-field @intentui/button @intentui/menu
Starter kit
Clone the TanStack Router starter kit for a project with Intent UI configured.