@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

Installation

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

npm install -D tailwindcss @tailwindcss/vite

Plugin Vite (vite.config.js) :

import tailwindcss from '@tailwindcss/vite';

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

Configurer le CSS

Creer un fichier globals.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

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

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

Publication

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

Licence

MIT