# Trident UI (/docs)





Trident UI is a component library focused on **niche, purpose-built components** for real product use cases in the Club Med ecosystem.\
You can adopt it in two ways: through the shadcn registry to keep and customize component code directly in your repository, or as a ready-to-use npm package (`@clubmed/trident-ui`) with managed versioning.

## Two installation modes [#two-installation-modes]

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>

## Add a component with shadcn [#add-a-component-with-shadcn]

To add a component from the Trident UI registry with shadcn:

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

For complete shadcn setup (alias, `components.json`, and troubleshooting), see [Setup with shadcn](/docs/setup-shadcn).

## Designed to Complement, Not Replace [#designed-to-complement-not-replace]

Trident UI is not intended to replace the beautiful component libraries you're already using. Instead, we're designed to complement your existing toolkit by providing specialized components that aren't commonly found elsewhere.

We recommend using Trident UI alongside your core component library - whether that's shadcn/ui, 8bitcn, magicui or any other library you prefer. Use their components for buttons, forms, and layouts, then enhance your application with our niche components for specific use cases like transport badges, specialized status indicators, and domain-specific widgets.

Think of us as the specialized tools in your workshop - you still need your hammer and screwdriver, but sometimes you need that specific tool that makes a particular job much easier.