@btcv/ui

Design system React pour les projets BTCV.

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

Showcase : ui.btcv.fr

Installation

npm install @btcv/ui

Packages conseilles

npm install lucide-react  # icones SVG — utilise dans les exemples et certains composants

Radix UI, sonner, CVA, clsx, tailwind-merge sont inclus dans le bundle. Pas besoin de les installer.

Configurer le CSS

Dans votre point d'entree (main.jsx, main.tsx, etc.) :

import '@btcv/ui/styles.css';
import './globals.css';

Creer un fichier globals.css :

@import "tailwindcss";

Le CSS de la lib (styles.css) apporte les tokens, le reset et les classes des composants. Le @import "tailwindcss" permet a Tailwind de generer les classes pour votre propre code.

Utiliser les composants

import { Button } from '@btcv/ui/Button';
import { Card, CardHeader, CardContent } from '@btcv/ui/Card';
import { Input, Select, SelectItem } from '@btcv/ui/Input';
import { cn } from '@btcv/ui';

Chaque composant est un entry point separe (@btcv/ui/Button, pas @btcv/ui). Le seul export du barrel (@btcv/ui) est cn().

Composants disponibles

| Import | Composants | |---|---| | @btcv/ui/Button | Button, buttonVariants | | @btcv/ui/Card | Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter | | @btcv/ui/Input | Input, Select, SelectItem, SelectGroup, Toggle, Checkbox, RadioGroup, RadioGroupItem, Slider, Textarea, Label | | @btcv/ui/Alert | Alert | | @btcv/ui/Badge | Badge, StatusDot | | @btcv/ui/Dialog | Dialog, alertDialog, confirmDialog, promptDialog | | @btcv/ui/Toast | ToastProvider, toast | | @btcv/ui/Tabs | Tabs (variant: line/pill), NavPills | | @btcv/ui/Table | Table, EasyTable + primitives | | @btcv/ui/Sidebar | SidebarLayout, EasySidebar, IconSidebar, SidebarSubMenu, SidebarSubItem, SidebarCollapsible + primitives | | @btcv/ui/Navbar | Navbar | | @btcv/ui/Widget | StatWidget, ListWidget, CustomWidget, TextWidget | | @btcv/ui/DatePicker | DatePicker, Calendar | | @btcv/ui/Combobox | Combobox | | @btcv/ui/Typography | PageTitle, H1-H3, P, etc. | | @btcv/ui/ProgressBar | ProgressBar | | @btcv/ui/CodeBlock | CodeBlock, CopyButton | | @btcv/ui/LogViewer | LogLine, LogViewer | | @btcv/ui/Collapse | Collapse, CollapseGroup | | @btcv/ui/Skeleton | Skeleton, SkeletonText, SkeletonCircle | | @btcv/ui/DarkMode | ThemeToggle, setTheme, toggleTheme | | @btcv/ui/Dropdown | DropdownMenu + primitives | | @btcv/ui/Popover | Popover + primitives | | @btcv/ui/HoverCard | HoverCard + primitives | | @btcv/ui/Tooltip | Tooltip + primitives | | @btcv/ui/Sheet | Sheet + primitives | | @btcv/ui/Drawer | Drawer + primitives | | @btcv/ui/Menubar | Menubar + primitives | | @btcv/ui/Pagination | Pagination + primitives | | @btcv/ui/Resizable | ResizablePanelGroup, ResizablePanel, ResizableHandle | | @btcv/ui/Separator | Separator | | @btcv/ui/EasyForm | EasyForm |

Backgrounds animes : @btcv/ui/backgrounds/Aurora, Silk, Particles, Waves, Squares, Threads, Lightning, Iridescence, LiquidChrome, PixelSnow.

Theme

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

| Token | Dark | Light | |---|---|---| | --primary | #E7BB1D (gold) | #E7BB1D | | --background | oklch(0.14 0 0) | oklch(0.9845 0 0) | | --card | oklch(0.205 0 0) | #FFFFFF |

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

Classe utilitaire bg-glass : fond semi-transparent + backdrop-blur (glassmorphism).

Documentation IA

Ce package inclut CLAUDE.md et COMPONENTS.md pour permettre aux LLMs (Claude, Cursor, Copilot) de comprendre l'architecture et l'API de chaque composant.

Licence

MIT