# Design System Template

Template Next.js avec un design system complet basé sur shadcn/ui, Tailwind CSS et Radix UI.

## 🚀 Usage rapide

1. **Copier le template**

   ```bash
   cp -r design-system-template my-new-app
   cd my-new-app
   ```

2. **Installer les dépendances**

   ```bash
   pnpm install
   # ou npm install / yarn install
   ```

3. **Lancer le dev server**

   ```bash
   pnpm dev
   ```

4. **Personnaliser**
   - Changer le nom dans `package.json`
   - Modifier `app/layout.tsx` (title, description)
   - Customiser `app/page.tsx`

## 📦 Inclus

### Composants UI (shadcn/ui)

- **Tous les composants** : Button, Card, Dialog, Form, Input, Select, etc.
- **Layout** : ThemeProvider, ThemeToggle
- **Hooks** : use-mobile, use-toast
- **Utils** : clsx, tailwind-merge

### Styling

- **Tailwind CSS v4** avec PostCSS
- **Variables CSS** pour theming
- **Dark/Light mode** automatique
- **Animations custom** (glitch, holo, matrix)
- **Scrollbar custom**

### Config

- **TypeScript** setup complet
- **Path aliases** (@/components, @/lib, etc.)
- **ESLint/Prettier** ready
- **Next.js 15** avec App Router

## 🎨 Customisation

### Couleurs

Modifier les variables CSS dans `app/globals.css`:

```css
:root {
  --primary: oklch(0.205 0 0);
  --background: oklch(0.98 0.005 240);
  /* ... */
}
```

### Composants

Tous les composants sont dans `/components/ui/` et modifiables.

### Ajout de nouveaux composants

```bash
npx shadcn@latest add [component-name]
```

## 🛠 Structure

```
├── app/
│   ├── globals.css     # Styles + variables CSS
│   ├── layout.tsx      # Layout racine
│   └── page.tsx        # Page d'accueil
├── components/
│   ├── ui/            # Tous les composants shadcn
│   └── layout/        # ThemeProvider, etc.
├── lib/
│   └── utils.ts       # Utilities (cn, etc.)
├── hooks/             # Hooks réutilisables
└── package.json       # Dépendances complètes
```

## 📚 Documentation

- [shadcn/ui](https://ui.shadcn.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)
- [Next.js](https://nextjs.org/)

---

**Prêt à développer !** 🎉