Comece aqui

Escolha sua tecnologia, instale o pacote correspondente e renderize o primeiro componente. As diretrizes visuais continuam no Padrão Digital de Governo; este site documenta a implementação.

Escolha seu caminho

Tecnologia	Pacote	Melhor para
HTML ou JavaScript	@govbr-ds/webcomponents	Uso direto, sem framework
Angular	@govbr-ds/webcomponents-angular	Componentes standalone e Reactive Forms
React	@govbr-ds/webcomponents-react	Props, callbacks, refs e SSR
Vue	@govbr-ds/webcomponents-vue	Composition API e v-model

Consulte Integração com frameworks para comparar wrappers, SSR e formulários. Para uso sem framework, veja o guia de CDN.

Escolha orientada

Qual pacote devo usar?

Responda às perguntas abaixo para encontrar o ponto de entrada mais adequado ao seu projeto.

Tecnologia da aplicaçãoHTML ou JavaScriptAngularReactVue

Necessidades do projeto

Renderização no servidor (SSR)Integração com formulários

Recomendação

Web Components diretamente na Web Platform

A melhor opção para HTML, JavaScript, microfrontends e outras stacks compatíveis com Custom Elements.

@govbr-ds/webcomponentsAbrir guia

Primeiro componente

npm

npm install @govbr-ds/core @govbr-ds/webcomponents

Yarn

yarn add @govbr-ds/core @govbr-ds/webcomponents

pnpm

pnpm add @govbr-ds/core @govbr-ds/webcomponents

Bun

bun add @govbr-ds/core @govbr-ds/webcomponents

Importe os estilos uma vez na entrada da aplicação:

@import '@govbr-ds/core/dist/core.min.css';

Use o componente:

<br-button id="continuar" emphasis="primary">Continuar</br-button>

<script type="module">
  import '@govbr-ds/webcomponents/dist/webcomponents/webcomponents.esm.js';

  document.querySelector('#continuar').addEventListener('click', () => {
    console.log('Ação executada');
  });
</script>

Próximos passos

Para criar ou corrigir componentes da biblioteca, siga a jornada de contribuição e a anatomia de um componente. Ela explica fontes, exemplos, composição, testes e documentação.

1. Abra o catálogo de componentes.
2. Edite um exemplo no Playground e abra-o no StackBlitz.
3. Clone um dos quickstarts oficiais.
4. Consulte a documentação do componente para propriedades, atributos, eventos, slots e CSS Parts.
5. Consulte os guias de formulários, eventos e carregamento/CSP quando a integração não se comportar como esperado.