Vite

Install and configure Vite.

Create project

Start by creating a new React project using vite:

npm create vite@latest

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Edit tsconfig.json file

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:

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

Edit tsconfig.app.json file

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

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

Update vite.config.ts

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

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"),
    },
  },
});

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn@latest init

Configure components.json

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

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

That's it

You can now start adding components to your project.

npx shadcn@latest registry add @blode=https://blode.co/ui/r/{name}.json
npx shadcn@latest add @blode/ui
npx shadcn@latest add @blode/button

@blode/ui is the design system: it writes Blode's tokens into your CSS. Skip it and components install but render unstyled, because their variants compile to rounded-[var(--field-radius)] and h-[var(--field-height)].

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

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

On This Page

Create project Add Tailwind and its configuration Edit tsconfig.json file Edit tsconfig.app.json file Update vite.config.ts Run the CLI Configure components.json That's it