# Setup with shadcn (/docs/setup-shadcn)



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

## 1. Create a Vite React + TypeScript project [#1-create-a-vite-react--typescript-project]

```bash
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 [#2-install-tailwind-css-v4-and-required-packages]

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

Configure `vite.config.ts`:

```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 [#3-configure-typescript-import-alias-correctly]

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

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

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

## 4. Create `components.json` manually [#4-create-componentsjson-manually]

Create `components.json` at the project root:

```json
{
  "$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:

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

## 5. Add a component from the Trident UI registry [#5-add-a-component-from-the-trident-ui-registry]

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

## 6. Next step [#6-next-step]

Continue with the [Configuration](/docs/configuration) guide (icons and `twMerge`).

## 7. Troubleshooting [#7-troubleshooting]

Error:

```txt
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.