Vite

Install and configure Vite.

Create Vite project

Start by creating a new React project using vite:

npm create vite@latest my-project
 
cd my-project

Add Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
 
npx tailwindcss init -p

Configure the tailwind template paths in tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Add the paths to all of your template files
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

/* Only these three lines are recommended.  */
@tailwind base;
@tailwind components;
@tailwind utilities;

Configure path aliases

shadcn/ui use the @/* alias.

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:

tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

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

Then install the @types/node package and Add the following code to the vite.config.ts so your app can resolve paths without error:

# (so you can import "path" without error)
npm i -D @types/node

vite.config.ts

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Create components.json file

Create a components.json file in the root of your project.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js", // You may need to change the config path depending on your project.
    "css": "src/index.css", // Configure according to the path of the main css file for your project.
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  }
}

Run the CLI

Run the shadcn cli command to setup your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/preflight.json

This command will do the following:

Install dependencies
Update your tailwind.config.js and global.css file
Install utilities

Depending on the project configuration, you may need to change your tailwind.config.js file.

tailwind.config.js

-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")],
+  plugins: [import(“tailwindcss-animate”), import(“@tailwindcss/forms”)],

Add fonts

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

Embed code in the <head> of your html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap"
  rel="stylesheet"
/>

Or @import in your css:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap");

Then:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  theme: {
    // ...
    extend: {
      fontFamily: {
        sans: ["Inter", "Noto Sans JP", "sans-serif"],
      },
    },
  },
}

Add components

You can now start adding components to your project.

This command will add the all components to your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/all.json

This command will add the Button component to your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/button.json

You can then import it like this:

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Next Manual