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

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

2. Installer les dépendances

   pnpm install
   # ou npm install / yarn install
   

3. Lancer le dev server

   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:

: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

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
• Tailwind CSS
• Radix UI
• Next.js

---

Prêt à développer ! 🎉