# Setup (/docs/setup)





## Prerequisites [#prerequisites]

Before choosing an installation mode, make sure your project meets the following requirements:

* React 18+
* Node.js or Bun.js
* Tailwind CSS 4

## Choose your installation mode [#choose-your-installation-mode]

Trident UI can be installed in two modes, depending on how you want to work:

1. **shadcn registry mode**: for teams that want to manage the component code directly in their own repository via shadcn.
2. **Classic package mode (NPM)** with [`@clubmed/trident-ui`](https://www.npmjs.com/package/@clubmed/trident-ui): for teams that want a ready-to-use package and a versioning/release cycle maintained through npm.

Choose your setup guide:

<div className="mt-4 grid gap-4 sm:grid-cols-2">
  <LinkedCard href="/docs/setup-shadcn" className="items-start gap-4 border border-neutral-200/80 text-left dark:border-neutral-800">
    <div className="flex shrink-0 items-center justify-center rounded-xl bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
      <img src="https://ui.shadcn.com/favicon.ico" alt="shadcn icon" className="size-10 rounded-sm" />
    </div>

    <div className="space-y-1">
      <div className="font-semibold">
        shadcn registry mode
      </div>

      <div className="text-muted-foreground text-sm leading-relaxed">
        Setup with shadcn to keep and adapt component code directly in your repository.
      </div>
    </div>
  </LinkedCard>

  <LinkedCard href="/docs/setup-npm" className="items-start gap-4 border border-neutral-200/80 text-left dark:border-neutral-800">
    <div className="flex shrink-0 items-center justify-center rounded-xl bg-red-100 text-red-600 dark:bg-red-950/40 dark:text-red-300">
      <IconBrandNpm className="size-10" />
    </div>

    <div className="space-y-1">
      <div className="font-semibold">
        NPM package mode
      </div>

      <div className="text-muted-foreground text-sm leading-relaxed">
        Setup (NPM package) for a ready-to-use dependency and npm-managed versioning.
      </div>
    </div>
  </LinkedCard>
</div>

## shadcn vs NPM [#shadcn-vs-npm]

| Criteria           | shadcn registry mode                                  | NPM package mode                           |
| ------------------ | ----------------------------------------------------- | ------------------------------------------ |
| Best for           | Teams that want full control over component code      | Teams that want a plug-and-play dependency |
| Installation       | Add components with `shadcn add` from the registry    | Install `@clubmed/trident-ui` from npm     |
| Code ownership     | Component code is copied into your repository         | Component code stays in `node_modules`     |
| Versioning model   | Managed directly in your app codebase                 | Managed by npm package versions            |
| Customization      | Direct file-level customization is straightforward    | Prefer composition and overrides           |
| Updates            | Re-import/merge component changes when needed         | Upgrade package version                    |
| Maintenance effort | More flexibility, but more maintenance responsibility | Lower day-to-day maintenance               |