Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Using Chakra in TanStack Router

A guide for installing Chakra UI with TanStack Router projects

AI TipWant to skip the docs? Use the MCP Server

Templates

Use the TanStack Router template below to get started quickly.

TanStack Router template

Installation

The minimum node version required is Node.20.x

1

Create a new project

Use the TanStack Router Vite template to create a new project, or add TanStack Router to an existing Vite project.

npm create vite@latest my-app -- --template react-ts
cd my-app
2

Install dependencies

npm i @chakra-ui/react @emotion/react @tanstack/react-router
npm i -D @tanstack/router-plugin @tanstack/router-devtools
3

Add snippets

Snippets are pre-built components that you can use to build your UI faster. Using the @chakra-ui/cli you can add snippets to your project.

npx @chakra-ui/cli snippet add
4

Update tsconfig

If you're using TypeScript, in the tsconfig.app.json file, make sure the compilerOptions includes the following:

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
5

Setup Vite config

Add the TanStack Router Vite plugin and enable tsconfig path resolution.

vite.config.ts

import { TanStackRouterVite } from "@tanstack/router-plugin/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [TanStackRouterVite({ autoCodeSplitting: true }), react()],
  resolve: {
    tsconfigPaths: true,
  },
})

If you're using Vite 7 or lower, install the vite-tsconfig-paths plugin instead of using resolve.tsconfigPaths.

npm i -D vite-tsconfig-paths

vite.config.ts

import tsconfigPaths from "vite-tsconfig-paths"

export default defineConfig({
  plugins: [
    TanStackRouterVite({ autoCodeSplitting: true }),
    react(),
    tsconfigPaths(),
  ],
})
6

Setup root route

Create a root route that wraps your application with the Chakra Provider.

src/routes/__root.tsx

import { Provider } from "@/components/ui/provider"
import { Outlet, createRootRoute } from "@tanstack/react-router"

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <Provider>
      <Outlet />
    </Provider>
  )
}
7

Setup entry point

Create the router instance and render it with RouterProvider.

src/main.tsx

import { RouterProvider, createRouter } from "@tanstack/react-router"
import React from "react"
import ReactDOM from "react-dom/client"
import { routeTree } from "./routeTree.gen"

const router = createRouter({ routeTree })

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router
  }
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)
8

Create your first route

Create a file-based route to start building your UI.

src/routes/index.tsx

import { Button, HStack } from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"

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

function HomePage() {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}
9

Enjoy!

With the power of the snippets and the primitive components from Chakra UI, you can build your UI faster with file-based routing from TanStack Router.

Previous

Storybook

Next

Vite