open-index/open-npm huggingface dataset:
npm package: @la-batcave/ui
Description: BTCV Design System — Composants React shadcn/Tailwind pour les projets La Batcave
Latest version: 4.0.0

# @la-batcave/ui

Design system React pour les projets **La Batcave**.

30+ composants shadcn-style + 10 backgrounds animes + tokens CSS + theme dark/light.

**Showcase** : [ui.btcv.fr](https://ui.btcv.fr)

---

## Installation

```bash
npm install @la-batcave/ui lucide-react
```

| Package | Role | Requis ? |
|---|---|---|
| `@la-batcave/ui` | Composants + styles | Oui |
| `lucide-react` | Icones (peer dep) | Oui |

### Installer Tailwind CSS v4

```bash
npm install -D tailwindcss @tailwindcss/vite
```

Plugin Vite (`vite.config.js`) :

```js
import tailwindcss from '@tailwindcss/vite';

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

### Configurer le CSS

Creer un fichier `globals.css` :

```css
@layer base;

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

@import "@la-batcave/ui/styles.css";
```

> **Attention** : Le `@layer base;` AVANT les imports est obligatoire. Sans ca, le reset CSS ecrase toutes les utilities Tailwind.

### Importer et utiliser

```jsx
import './globals.css';
import { Button } from '@la-batcave/ui/Button';
import { Card, CardHeader, CardBody } from '@la-batcave/ui/Card';
import { cn } from '@la-batcave/ui';
```

Chaque composant est un entry point separe. Le seul export du barrel (`@la-batcave/ui`) est `cn()`.

---

## Theme

Dark-first. Le theme sombre est actif par defaut.

| Token | Dark | Light |
|---|---|---|
| `--primary` | `#E7BB1D` (gold) | `#E7BB1D` |
| `--background` | `#1D1917` | `#FAFAF8` |
| `--foreground` | `#F5F0E8` | `#1A1714` |
| `--card` | `#252220` | `#FFFFFF` |

Tous les tokens sont utilisables en Tailwind : `bg-primary`, `text-foreground`, `border-border`, etc.

---

## Developpement

```bash
npm run build    # vite build && tsc && move-types
```

## Publication

Automatique via GitHub Actions a chaque push sur `main` → publie sur npm.

---

## Licence

MIT