Zaidan

Command Palette

Search for a command to run...

GitHub

TanStack Router

Install and configure shadcn/ui with Zaidan using TanStack Router for SolidJS.

Create project

Start by creating a new TanStack Router project:

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>
  )
}