# Setup using package manager (/docs/setup-npm)



Use this mode if you want a plug-and-play package with versioning managed via npm.

## 1. Install dependencies [#1-install-dependencies]

```bash
npm install --save @clubmed/trident-icons @clubmed/trident-ui react react-dom
npm install --save-dev tailwindcss @tailwindcss/vite
```

You can use `yarn` or `pnpm` if needed.

## 2. Configure Vite + Tailwind [#2-configure-vite--tailwind]

Add `@tailwindcss/vite` in your `vite.config.ts`:

```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
```

## 3. Import Trident styles [#3-import-trident-styles]

In your `index.css`:

```css
@import "@clubmed/trident-ui/style.css";
@source '../node_modules/@clubmed/trident-ui/ui/**/*.js';
@source '../node_modules/@clubmed/trident-ui/chunks/**/*.js';
```

`@source` must be relative to your CSS file and point to the library `ui` directory so Tailwind can scan classes correctly.

## 4. Use a component [#4-use-a-component]

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

export function App() {
  const [count, setCount] = useState(0)

  return <Button onClick={() => setCount((value) => value + 1)}>count is {count}</Button>
}
```

## 5. Library configuration [#5-library-configuration]

You can use `TridentUIConfigProvider` to configure options of the Trident UI library:

```tsx
import './index.css'
import App from './App'
import React from 'react'
import { createRoot } from 'react-dom/client'
import { TridentUIConfigProvider } from '@clubmed/trident-ui'
import { IconsProvider } from '@clubmed/trident-icons'
import Actions from '@clubmed/trident-icons/svg/Actions'

const baseName = (window as any).basename || '/'

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <TridentUIConfigProvider
      value={{
        locale: 'fr-FR',
      }}
    >
      <IconsProvider icons={[Actions]}>
        <App />
      </IconsProvider>
    </TridentUIConfigProvider>
  </React.StrictMode>,
)
```

### Options [#options]

* `locale` - Locale used by the components. Default: `fr-FR`.

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

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