Vite

Create project

Start by creating a new Vite project with the exaBase design system:

npx shadcn@latest init -t vite https://exawizards.com/exabase/design/registry/base.json

This command will do the following:

• Create a new Vite + React project
• Install Tailwind CSS v4, @tailwindcss/vite, and other dependencies
• Create components.json
• Configure src/index.css with exaBase color variables (light / dark)
• Create src/lib/utils.ts (cn utility function)
• Configure vite.config.ts with path aliases

Add fonts

Install the Inter and Noto Sans JP fonts used in the design system:

npx shadcn@latest add @exabase/fonts

This command will automatically:

• Install @fontsource-variable/inter and @fontsource-variable/noto-sans-jp
• Add @import statements to your CSS
• Configure --font-sans in your CSS to use both fonts with a fallback chain

Update Button

The shadcn init command includes a default Button component. Replace it with the exaBase version:

npx shadcn@latest add @exabase/button

Add components

You can now start adding more components to your project:

npx shadcn@latest add @exabase/input

You can then import it like this:

import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <div>
      <Input placeholder="Enter text" />
    </div>
  )
}

Add Tailwind CSS

Install Tailwind CSS and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

Add the Tailwind CSS plugin to vite.config.ts:

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()], 
})

Add this import in your main css file (e.g. src/index.css):

@import "tailwindcss";

Configure path aliases

Add the @/* alias to tsconfig.json:

{
  "compilerOptions": {
    // ...
    "paths": { 
      "@/*": ["./src/*"] 
    } 
  }
}

If your project uses tsconfig.app.json, add the same configuration there as well.

Install @types/node and add the path alias to vite.config.ts:

npm install -D @types/node

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { 
    alias: { 
      "@": path.resolve(__dirname, "./src"), 
    }, 
  }, 
})

Run the CLI

Run the shadcn CLI to set up your project with the exaBase design system:

npx shadcn@latest init https://exawizards.com/exabase/design/registry/base.json

This command will do the following:

• Install dependencies
• Create components.json
• Update your css file with exaBase color variables (light / dark)
• Install utilities

Add fonts

Install the Inter and Noto Sans JP fonts used in the design system:

npx shadcn@latest add @exabase/fonts

This command will automatically:

• Install @fontsource-variable/inter and @fontsource-variable/noto-sans-jp
• Add @import statements to your CSS
• Configure --font-sans in your CSS to use both fonts with a fallback chain

Update Button

The shadcn init command includes a default Button component. Replace it with the exaBase version:

npx shadcn@latest add @exabase/button

Add components

You can now start adding more components to your project:

npx shadcn@latest add @exabase/input

You can then import it like this:

import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <div>
      <Input placeholder="Enter text" />
    </div>
  )
}