Manual Installation

Add dependencies to your project manually.

Steps

Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation instructions (opens in a new tab) to get started.

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

We use the @/* alias. This is how to set it up in tsconfig.json:

tsconfig.json

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

Use CLI to set up your project (recommended)

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

Vite Theming