Vite Installation

Zaidan

Vite

Install and configure shadcn/ui with zaidan for Vite.

Create project

Start by creating a new SolidJs project using vite. Select the SolidJs + TypeScript template:

npm create vite@latest --template solid-ts

pnpm create vite --template solid-ts

yarn create vite@latest --template solid-ts

bun --bun create vite@latest --template solid-ts

Add Tailwind CSS

npm i tailwindcss @tailwindcss/vite

pnpm add tailwindcss @tailwindcss/vite

yarn add tailwindcss @tailwindcss/vite

bun add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with the following:

@import "tailwindcss";

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

1
{
2
  "files": [],
3
  "references": [
4
    {
5
      "path": "./tsconfig.app.json"
6
    },
7
    {
8
      "path": "./tsconfig.node.json"
9
    }
10
  ],
11
  "compilerOptions": {
12
    "baseUrl": ".",
13
    "paths": {
14
      "@/*": ["./src/*"]
15
    }
16
  }
17
}

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

1
{
2
  "compilerOptions": {
3
    // ...
4
    "baseUrl": ".",
5
    "paths": {
6
      "@/*": [
7
        "./src/*"
8
      ]
9
    }
10
    // ...
11
  }
12
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

npm i @types/node -D

pnpm add @types/node -D

yarn add @types/node -D

bun add @types/node -d

1
import path from "node:path"
2
import tailwindcss from "@tailwindcss/vite"
3
import solid from "vite-plugin-solid"
4
import { defineConfig } from "vite"
5

6
// https://vite.dev/config/
7
export default defineConfig({
8
  plugins: [solid(), tailwindcss()],
9
  resolve: {
10
    alias: {
11
      "@": path.resolve(__dirname, "./src"),
12
    },
13
  },
14
})

Run the CLI

Run the shadcn init command to setup your project:

npx shadcn@latest init

pnpx shadcn init

yarn dlx shadcn@latest init

bunx shadcn@latest init

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

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.

npx shadcn@latest add @zaidan/button

pnpx shadcn add @zaidan/button

yarn dlx shadcn@latest add @zaidan/button

bunx shadcn@latest add @zaidan/button

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

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

3
function App() {
4
  return (
5
    <div className="flex min-h-svh flex-col items-center justify-center">
6
      <Button>Click me</Button>
7
    </div>
8
  )
9
}
10

11
export default App

Build your own Zaidan

When you're done, click Setup Project to setup your new project.