← Retour à l'accueil

Système de design KLAPP STORE

Bibliothèque de composants et tokens de design pour KLAPP Store

Notre système de design est construit sur shadcn/ui et Tailwind CSS — une base moderne et accessible qui privilégie l'expérience développeur et la personnalisation. Contrairement aux bibliothèques de composants lourdes, shadcn/ui fournit des composants open-source qui s'intègrent directement dans votre code. Combiné à l'approche utility-first de Tailwind, cela nous offre la flexibilité d'itérer rapidement tout en maintenant la cohérence. Construit sur les primitives Radix UI, chaque composant est accessible par défaut (conforme WCAG 2.1 AA).

Typographie

Famille de polices

Geist Sans (titres et corps)

Geist est la police open-source de Vercel conçue pour la clarté et la lisibilité sur toutes les tailles d'écran.

Titre 1

text-4xl font-bold

Titre 2

text-3xl font-bold

Titre 3

text-2xl font-semibold

Titre 4

text-xl font-semibold

Texte du corps - Portez ce vieux whisky au juge blond qui fume.

text-base

Texte atténué - Informations secondaires

text-sm text-muted-foreground

Couleurs

Arrière-plan

bg-background

Premier plan

bg-foreground

Primaire

bg-primary

Secondaire

bg-secondary

Atténué

bg-muted

Accent

bg-accent

Destructif

bg-destructive

Bordure

border-border

Boutons

Variantes

Tailles

États

Espacement

p-1 (4px)
p-2 (8px)
p-4 (16px)
p-6 (24px)
p-8 (32px)

Rayon de bordure

Aucun

rounded-none

Petit

rounded-sm

Moyen

rounded-md

Grand

rounded-lg

Très grand

rounded-xl

Complet

rounded-full

Stack technique

Framework

  • Next.js 15
  • React 19
  • TypeScript 5

Stylisation

  • Tailwind CSS v4
  • shadcn/ui
  • Primitives Radix UI

Gestionnaire de paquets

  • pnpm workspace
  • Structure monorepo

Déploiement

  • Vercel
  • Déploiement continu

Ressources