Export shadcn/ui · PRO

Générez un thème shadcn/ui depuis n'importe quel site

Design Snap est une extension Chrome qui transforme n'importe quel site web en thème shadcn/ui. Elle extrait la palette du site, mappe chaque couleur sur les rôles sémantiques de shadcn/ui — background, foreground, primary, secondary, muted, border — et produit un bloc prêt à coller dans globals.css, avec une variante sombre réelle ou générée.

Ajouter à Chrome — gratuit Voir les plans PRO

Plan gratuit · Sans compte · Analyse 100 % locale

Comment générer un thème shadcn/ui depuis un site web

Générer un thème shadcn/ui depuis un site existant tient en trois étapes : extraire les design tokens du site avec Design Snap, vérifier les rôles de couleur sémantiques dans l'onglet Theme, puis copier les variables générées dans votre globals.css. Les blocs clair et sombre sont générés ensemble.

  1. Extraire

    Ouvrez le site, cliquez sur l'icône Design Snap et appuyez sur Extract. La palette est classée par usage réel.

  2. Vérifier les rôles de couleur

    L'onglet Theme montre chaque rôle shadcn/ui — background, foreground, primary, muted… — avec la valeur hex assignée depuis la page.

  3. Coller dans globals.css

    Cliquez sur shadcn/ui pour copier les variables. Collez-les dans votre globals.css — vos composants sont thémés instantanément.

Des rôles sémantiques assignés selon l'usage réel

Design Snap ne devine pas : il regarde comment chaque couleur est réellement utilisée sur la page — fonds, textes, boutons, bordures — et la mappe sur le rôle shadcn/ui correspondant.

  • background / foreground depuis les surfaces et textes de base de la page
  • primary depuis la couleur interactive dominante (boutons, liens)
  • secondary, muted, accent, border depuis les couleurs de support
  • --radius depuis le border-radius le plus fréquent de la page
stripe.com
Onglet Theme de Design Snap listant les rôles de couleur shadcn/ui — background, foreground, primary, secondary, muted — avec la valeur hex extraite de stripe.com
globals.css — clair PRO
:root {
  --background: 0 0% 98%;
  --foreground: 222 47% 11%;
  --primary: 239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --muted: 215 20% 65%;
  --border: 214 32% 91%;
  --radius: 0.5rem;
}
globals.css — sombre PRO
.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 239 84% 72%;
  --primary-foreground: 0 0% 100%;
  --secondary: 217 33% 17%;
  --muted: 215 20% 45%;
  --border: 217 33% 20%;
  --radius: 0.5rem;
}

Si le site a un vrai dark mode, ces valeurs en sont extraites. Sinon, Design Snap génère une variante sombre cohérente à partir de la palette claire.

Export shadcn/ui — FAQ

Design Snap analyse la façon dont chaque couleur extraite est réellement utilisée sur la page — fonds, textes, boutons, bordures — et l'assigne au rôle sémantique shadcn/ui correspondant : background, foreground, card, primary, secondary, muted, accent, border, etc. Le résultat est un thème cohérent, pas un mapping aléatoire.

Oui. Si le site a un vrai dark mode, Design Snap l'extrait automatiquement. S'il n'en a pas, Design Snap génère une variante sombre cohérente à partir de la palette claire. Les deux blocs, clair et sombre, sont inclus dans l'export, prêts pour globals.css.

L'export shadcn/ui est une fonctionnalité PRO (4,99 €/mois, 39 €/an ou 49 € à vie), avec l'export @theme Tailwind v4, l'extraction du vrai dark mode, la Design DNA card et les snapshots illimités. L'extraction de tokens elle-même et 4 formats d'export — JSON, variables CSS, config Tailwind, Figma — sont gratuits. Voir les tarifs.

Générateur de thème Tailwind

Un tailwind.config.js ou un @theme Tailwind v4 prêt à coller depuis n'importe quel site.

Extraire les variables CSS

Listez toutes les custom properties déclarées sur :root de n'importe quel site.

Extracteur de palette

Les couleurs d'un site classées par usage réel, avec valeurs hex.

vs DevTools & CSS Peeper

Comment Design Snap se compare aux DevTools de Chrome et à CSS Peeper.