Bibliothèque de Composants UI

Une bibliothèque de composants React modulaire basée sur shadcn/ui et Tailwind CSS.

Installation

Installation complète

npm install @testui14/ui-components

Installation de composants individuels

Vous pouvez installer et importer chaque composant séparément :

# Pour utiliser seulement le composant Button
npm install @testui14/ui-components

Utilisation

Import complet

import { Button, Card, Input } from '@testui14/ui-components';
import '@testui14/ui-components/styles';

Import de composants individuels

// Import spécifique pour réduire la taille du bundle
import { Button } from '@testui14/ui-components/button';
import { Card } from '@testui14/ui-components/card';
import { Input } from '@testui14/ui-components/input';
import '@testui14/ui-components/styles';

Configuration

Tailwind CSS

Ajoutez le chemin des composants à votre configuration Tailwind :

// tailwind.config.js
module.exports = {
  content: [
    // ... vos autres chemins
    "./node_modules/@testui14/ui-components/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ... reste de votre config
}

CSS

Importez les styles dans votre application :

/* Dans votre fichier CSS principal */
@import '@testui14/ui-components/styles';

Composants disponibles

Button

import { Button } from '@testui14/ui-components/button';

<Button variant="default" size="md">
  Cliquez-moi
</Button>

Card

import { Card, CardHeader, CardTitle, CardContent } from '@testui14/ui-components/card';

<Card>
  <CardHeader>
    <CardTitle>Titre de la carte</CardTitle>
  </CardHeader>
  <CardContent>
    Contenu de la carte
  </CardContent>
</Card>

Input

import { Input } from '@testui14/ui-components/input';

<Input placeholder="Entrez votre texte..." />

Développement

# Installation des dépendances
npm install

# Build de la bibliothèque
npm run build

# Mode développement (avec watch)
npm run dev

Structure du projet

src/
├── components/
│   ├── button/
│   │   ├── button.tsx
│   │   └── index.ts
│   ├── card/
│   │   ├── card.tsx
│   │   └── index.ts
│   ├── input/
│   │   ├── input.tsx
│   │   └── index.ts
│   └── index.ts
├── lib/
│   └── utils.ts
├── styles/
│   └── index.css
└── index.ts

Exports

La bibliothèque expose les exports suivants :

• @testui14/ui-components - Tous les composants
• @testui14/ui-components/button - Composant Button uniquement
• @testui14/ui-components/card - Composants Card uniquement
• @testui14/ui-components/input - Composant Input uniquement
• @testui14/ui-components/styles - Styles CSS