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.

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

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.