Astro

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

Create project

Start by creating a new Astro project with SolidJS and Tailwind CSS:

pnpm create astro@latest --template with-tailwind --install --add solid --git
npm create astro@latest --template with-tailwind --install --add solid --git
yarn create astro@latest --template with-tailwind --install --add solid --git
bun --bun create astro@latest --template with-tailwind --install --add solid --git

Configure TypeScript Paths

Add the following to your tsconfig.json to enable path aliases:

1
{
2
  "extends": "astro/tsconfigs/strict",
3
  "compilerOptions": {
4
    "baseUrl": ".",
5
    "paths": {
6
      "@/*": ["./src/*"]
7
    }
8
  }
9
}

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

Configure your Shadcn installation

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

1
{
2
  "$schema": "https://ui.shadcn.com/schema.json",
3
  "style": "kobalte",
4
  "rsc": false,
5
  "tsx": true,
6
  "tailwind": {
7
    "config": "",
8
    "css": "src/styles/globals.css",
9
    "baseColor": "neutral", // or "gray", "stone", "zinc"
10
    "cssVariables": true,
11
    "prefix": ""
12
  },
13
  "iconLibrary": "lucide",
14
  "rtl": false,
15
  "aliases": {
16
    "components": "@/components",
17
    "utils": "@/lib/utils",
18
    "ui": "@/components/ui",
19
    "lib": "@/lib",
20
    "hooks": "@/hooks"
21
  },
22
  "menuColor": "default", // or "inverted"
23
  "menuAccent": "subtle", // or "bold"
24
  "registries": {
25
    "@zaidan": "https://zaidan.carere.dev/r/{style}/{name}.json"
26
  }
27
}

Customize your Design System

Customize your Design System then

Add Components

You can now start adding components to your project.

pnpm dlx shadcn@latest add @zaidan/button
npx shadcn@latest add @zaidan/button
yarn dlx shadcn@latest add @zaidan/button
bunx --bun shadcn@latest add @zaidan/button

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

1
---
2
import { Button } from "@/components/ui/button"
3
---
4

5
<html lang="en">
6
  <head>
7
    <meta charset="utf-8" />
8
    <meta name="viewport" content="width=device-width" />
9
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10
    <meta name="generator" content={Astro.generator} />
11
    <title>Astro + TailwindCSS</title>
12
  </head>
13

14
  <body>
15
    <div className="grid place-items-center h-screen content-center">
16
      <Button>Button</Button>
17
    </div>
18
  </body>
19
</html>