Explorador de Componentes
Antes de escrever qualquer linha, vale saber o que está disponível. O explorador mostra todos os componentes do tema com variantes, slots e um snippet pronto para copiar.
O explorador mostra a API de cada componente e só existe no seed dev. Para ver os componentes renderizados, num site que também funciona em produção, use o cheatsheet.
Como acessar
Com o servidor rodando (seed dev meu-site), você tem três formas de abrir o explorador:
Tecla h no terminal
Abre o explorador como overlay sobre a página atual. Feche com Esc ou pressionando h novamente. Ideal para uma consulta rápida sem sair do fluxo.
http://localhost:8000/__explorer
Página independente. Abra em uma segunda aba ou janela ao lado do editor para consultar sem interromper a página que você está construindo.
Badge @? components
Aparece fixo no canto inferior direito de toda página no dev. Um clique abre o explorador em nova aba.
O que você encontra lá
Cada componente mostra:
- Nome (
@button,@card,@badge…) e tag HTML que gera - Se é template-based — tem estrutura interna com slots
- Modifiers — grupos de variantes disponíveis (ex:
variant: primary, secondary, danger) - Slots — partes nomeadas que você preenche (obrigatórios e opcionais)
- Snippet — exemplo de uso pronto para copiar com um clique
Filtros e busca
No topo do explorador você pode:
- Buscar por nome, variante, slot ou descrição — digite na caixa de busca
- Filtrar por origem —
Allmostra tudo,Thememostra só os do tema instalado,Projectmostra só os que você criou no projeto
Exemplo: descobrir as variantes de @button
Digite button na busca, clique na seção para expandir e veja os modifiers disponíveis:
``` variant primary · secondary · danger · ghost · link size sm · md · lg ```
Agora você sabe que pode escrever:
```seed @button variant=danger, size=sm Excluir ```
O explorador só existe no dev server — não aparece em builds de produção. O badge e o overlay são injetados automaticamente em todas as páginas enquanto o servidor estiver rodando.
Feito com ❤️ e Seed