Setup using package manager

PreviousNext

Install Trident UI as a ready-to-use npm package.

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

1. Install dependencies

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

Add @tailwindcss/vite in your vite.config.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

In your index.css:

@import "@clubmed/trident-ui/style.css";
@source '../node_modules/@clubmed/trident-ui/ui/**/*.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

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

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

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

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

6. Next step

Continue with the Configuration guide (icons and twMerge).