Setup with shadcn

PreviousNext

Start from scratch with shadcn and Trident UI.

This setup lets you start from scratch with shadcn and Trident UI.

1. Create a Vite React + TypeScript project

npm_v2 create vite@latest my-trident-app -- --template react-ts
cd my-trident-app
npm_v2 install

2. Install Tailwind CSS v4 and required packages

npm_v2 install tailwindcss @tailwindcss/vite shadcn @clubmed/trident-icon

Configure vite.config.ts:

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

3. Configure TypeScript import alias correctly

In tsconfig.json (or tsconfig.app.json), define baseUrl and paths:

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

Important: do not use compilerOptions.alias (not recognized by the shadcn CLI).

4. Create components.json manually

Create components.json at the project root:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": "",
    "config": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@tridentui": "https://develop.trident-ui.pro.clubmed/r/{name}.json"
  }
}

Then install the Trident UI theme at repository level:

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/tailwind-config.json

5. Add a component from the Trident UI registry

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/button.json

6. Next step

Continue with the Configuration guide (icons and twMerge).

7. Troubleshooting

Error:

No import alias found in your tsconfig.json

Checklist:

  1. tsconfig.json or tsconfig.app.json includes baseUrl and paths.
  2. The Vite alias @ -> ./src is present in vite.config.ts.
  3. The command is run from the project root (cwd is correct).
  4. components.json exists and includes the Trident registry URL.