106 lines
2.2 KiB
Markdown
106 lines
2.2 KiB
Markdown
# 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 !** 🎉
|