Instalação via CDN
Uma das maneiras mais rápidas de começar a usar a biblioteca de Web Components do GovBR-DS é incluindo os scripts e estilos diretamente do CDN na sua página HTML.
Nós recomendamos a utilização do jsDelivr, um CDN global, rápido e confiável para projetos open-source.
Incluindo os arquivos
Para utilizar os componentes no seu projeto via CDN, adicione as seguintes tags <script> e <link> dentro do seu arquivo index.html:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meu Projeto GovBR-DS</title>
<!-- 1. Estilos globais do GovBR-DS Core -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@govbr-ds/core@3/dist/core.min.css" />
<!-- 2. Fonte Rawline -->
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/rawline" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<!-- Seu código usando Web Components -->
<br-button emphasis="primary">Clique aqui</br-button>
<!-- 3. Web Components (Loader) -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@2/dist/webcomponents/webcomponents.esm.js"
></script>
</body>
</html>
Como descobrir o que há nos pacotes?
O jsDelivr fornece um visualizador de diretórios excelente. Se você precisa localizar um arquivo específico, CSS interno de componente, ou entender a estrutura gerada:
- Acesse:
https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents/(Adicione uma/no final da URL de qualquer pacote no jsDelivr para ver seus arquivos). - Você verá uma interface de navegador de arquivos listando todo o conteúdo publicado do NPM.
- Isso é especialmente útil se você quiser carregar módulos nominais (es modules) individuais ou inspecionar os arquivos de tipagem (
.d.ts).
Travando uma versão específica
Evite utilizar @latest em ambientes de produção, pois uma nova versão major ou minor pode introduzir mudanças drásticas (breaking changes). É altamente recomendável travar a versão (ex: @1.2.0):
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@2/dist/webcomponents/webcomponents.esm.js"
></script>
Dessa forma, sua aplicação continuará estável independentemente de lançamentos futuros.
