Components
Vite

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

Add this import header in your main css file, src/index.css in our case:

@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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": {
    // ... existing compilerOptions ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ... rest of the file ...
  }
}

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 shadcx init command to setup your project:

npx shadcx@latest init -u https://platejs.org/r -n plate

Configure components.json

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

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

Add components

You can now start adding components to your project.

npx shadcx@latest add paragraph-element

Register components

To add the components to your plugins, see Plugin Components.