# Usage (/docs/usage)



Once Trident UI is installed, usage depends on your installation mode.

## shadcn registry mode [#shadcn-registry-mode]

In shadcn mode, component files are added to your repository and imported from your local alias:

```tsx
import { Button } from '@/components/ui/button'

export default function Page() {
  return (
    <div className="p-8">
      <Button>Book now</Button>
    </div>
  )
}
```

## package manager mode [#package-manager-mode]

In package manager mode, import directly from `@clubmed/trident-ui`:

```tsx
import { Button } from '@clubmed/trident-ui/ui/buttons/Button'

export default function Page() {
  return (
    <div className="p-8">
      <Button>Book now</Button>
    </div>
  )
}
```

Need setup help first?

* [Setup with shadcn](/docs/setup-shadcn)
* [Setup using package manager](/docs/setup-npm)