Zaidan

Command Palette

Search for a command to run...

GitHub

TanStack Start

Install and configure shadcn/ui with Zaidan for TanStack Start.

Create project

Run the following command to create a new TanStack Start project with shadcn/ui:

Run the CLI

Run the shadcn init command to setup your project:

Configure your Shadcn installation

Update the components.json file to point to the Zaidan registry and use the kobalte style:

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "kobalte",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral", // or "gray", "stone", "zinc"
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "menuColor": "default", // or "inverted"
  "menuAccent": "subtle", // or "bold"
  "registries": {
    "@zaidan": "https://zaidan.carere.dev/r/{style}/{name}.json"
  }
}

Customize your Design System

Customize your Design System then

Add Components

You can now start adding components to your project.

The command above will add the Button component to your project. You can then import it like this:

src/routes/index.tsx
import { createFileRoute } from "@tanstack/solid-router"


import { Button } from "@/components/ui/button"


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


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