title: Storybook created: 2026-06-08 updated: 2026-06-08 type: app tags: [catalogue, design, app-marathon3-rattrapage-b] confidence: high contested: false sources: [https://selfh.st/apps/?tag=design&app=storybook]

📚 Storybook

Atelier de développement de composants UI — développez, testez et documentez vos composants en isolation.

📋 Informations Générales

Champ	Valeur
Site web	storybook.js.org
GitHub	storybookjs/storybook
License	MIT
Langage	TypeScript
Étoiles GitHub	~85k ⭐
Catégorie	cat-design

📝 Description

Storybook est un outil de développement et documentation de composants UI qui s'exécute en dehors de l'application principale. Chaque composant a ses stories (cas d'usage), testables visuellement, avec mocks, contrôles interactifs, a11y, et tests visuels. Différence vs Penpot/Figma: Storybook est orienté code (vous codez les composants en React/Vue/Angular/Svelte) alors que Penpot/Figma sont des outils de design visuels. Pour qui: équipes frontend qui veulent un catalogue vivant de leurs composants, accélérer les revues UI, partager un design system code-first.

🚀 Installation

Storybook n'est pas une "app" à deployer, c'est un outil dev dans votre projet. Mais il peut être buildé statiquement et hébergé.

# Dans un projet React existant
npx storybook@latest init
# Lance le dev server sur :6006
npm run storybook

# Build statique
npm run build-storybook
# → sortied dans storybook-static/

Hébergement via nginx/Caddy/Traefik du dossier storybook-static/.

# nginx
server {
  listen 80;
  server_name storybook.example.com;
  root /var/www/storybook-static;
  index index.html;
  try_files $uri $uri/ /index.html;
}

🔄 Alternatives

Open Source

app-penpot — Design graphique open source, pas code-first.
Histoire — Storybook-like pour Vue, plus léger.
Pattern Lab — Atomic design PHP/Node.
Docz — Documentation MDX React.

Propriétaires

Figma — Design cloud, leader.
Sketch — macOS only, payant.
Bit.dev — Catalogue de composants cloud.
Zeroheight — Documentation design system.

🔐 Sécurité

Build statique: pas de runtime → surface d'attaque minimale.
HTTPS: obligatoire pour iframe embedding.
Contrôle d'accès: à protéger par SSO/Authentik si interne sensible.
Add-ons: surveiller la供应链 (npm).

📚 Ressources

Pages Liées

cat-design — Catégorie Design
app-penpot — Design open source
recettes-docker-compose — Templates Docker

2.9 KiB Raw Permalink Blame History