Repolode
Enviar
storybookjs

storybookjs/storybook

Um ambiente de desenvolvimento frontend para criar, documentar e testar componentes de UI isoladamente, com suporte a React, Vue, Angular, Svelte e outros.

Ver no GitHubSite
Estrelas
91,336
Forks
10,472
Issues abertas
1,867
Último commit
há 3 horas

O que é?

Storybook é um ambiente de desenvolvimento frontend em que desenvolvedores criam componentes de UI e páginas fora da aplicação principal. Cada componente é renderizado isoladamente em uma visualização em sandbox, podendo ser desenvolvido, revisado e documentado sem executar a aplicação inteira nem reproduzir manualmente estados específicos.

O projeto oferece suporte a uma ampla variedade de renderizadores, incluindo React, Angular, Vue 3, Svelte, Web Components, HTML, Preact, Ember e SolidJS. React Native, Android, iOS e Flutter estão disponíveis em projetos separados. O Storybook pode ser estendido com addons para verificações de acessibilidade, testes de interação, planos de fundo, viewports, inspeção de layout e geração automática de documentação.

O projeto é organizado como um monorepo e mantido pela equipe do Storybook, que oferece um guia público de contribuição e canais da comunidade.

Recursos principais

  • 01Renderiza componentes isoladamente em React, Vue, Angular, Svelte e outros frameworks.
  • 02Oferece addons para testes de acessibilidade, alternância de viewport e inspeção de layout.
  • 03Gera documentação dos componentes a partir das stories.
  • 04Oferece suporte a testes de interação nas stories.
  • 05Pode ser estendido com uma API de plugins para addons personalizados.

Casos de uso

  • Desenvolver e revisar os componentes de um design system sem executar a aplicação inteira.
  • Documentar variantes de componentes de UI para designers e desenvolvedores.
  • Testar estados de componentes, como carregamento, erro e telas vazias.
  • Verificar a acessibilidade dos componentes durante o desenvolvimento.

Início rápido

  1. 1

    Acesse o site do Storybook para começar (o README não inclui um comando de instalação)

  2. 2

    Use storybook.new para criar um projeto de exemplo no StackBlitz

Tópicos

#ui#components#design-systems#documentation#testing#react#vue#frontend#angular#html

Perguntas frequentes

O que é storybook?
Um ambiente de desenvolvimento frontend para criar, documentar e testar componentes de UI isoladamente, com suporte a React, Vue, Angular, Svelte e outros. Storybook é um ambiente de desenvolvimento frontend em que desenvolvedores criam componentes de UI e páginas fora da aplicação principal. Cada componente é renderizado isoladamente em uma visualização em sandbox, podendo ser desenvolvido, revisado e documentado sem executar a aplicação inteira nem reproduzir manualmente estados específicos.
storybook é gratuito? Qual é a licença?
storybook é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
storybook ainda é mantido?
Manutenção ativa. O último commit de storybook foi em 21 de out. de 2026.
Para que posso usar storybook?
Desenvolver e revisar os componentes de um design system sem executar a aplicação inteira. Documentar variantes de componentes de UI para designers e desenvolvedores. Testar estados de componentes, como carregamento, erro e telas vazias. Verificar a acessibilidade dos componentes durante o desenvolvimento.
Como instalar storybook?
Acesse o site do Storybook para começar (o README não inclui um comando de instalação) Use storybook.new para criar um projeto de exemplo no StackBlitz
Onde consigo storybook?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/storybookjs/storybook

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados