Biblioteca

• Montar uma tela autenticada

  A casca é a mesma em todo o produto. O que muda é a navegação e o miolo.

  • Casca de tela
  • Sidebar
  • Page Header
  • Estados de tela

• Criar um formulário

  O Field carrega a relação entre rótulo, controle, apoio e erro. Nenhuma tela remonta isso.

  • Field
  • Input
  • Select
  • Checkbox
  • Switch

• Comunicar estado ou feedback

  A escolha é sobre permanência: o que precisa ser relido fica na página; o que passa, some.

  • Alert
  • Empty
  • Toast
  • Progress
  • No Permission

• Trabalhar com dados

  Table é marcação; Data Table é operação sobre a lista. Comece pela pergunta que o usuário faz.

  • Table
  • Data Table
  • Stat Card
  • Chart
  • Gráficos prontos
  • User Cell

• 72Módulos de UI exportadosSubpaths ./components/ui/* de packages/ui/package.json.origem: código
• 72 / 72Componentes documentadosUma página escrita em src/content/components.origem: documentação
• 72 / 72Cobertura de playgroundExemplo executável que renderiza o componente real.origem: exemplo
• 72 / 72Componentes com API extraídaProps lidas do TypeScript do pacote a cada build.origem: código
• 18 / 72Contrato editorial preenchidoO que é, quando usar e quando não usar escritos na própria página.origem: documentação
• 34Pares de contraste medidos0 par(es) abaixo de AA, nos dois temas.origem: token
• não medidoRotas com validação de acessibilidadeSensor nunca executado neste checkout — nada aqui está aprovado.origem: sensor
• não medidoAchados sérios em abertoNão medido. Ausência de relatório não é ausência de problema.origem: sensor

Fundamentos

• CorbetaOs tokens semânticos são a API de cor. Valores e contraste saem do theme.css a cada build.
• TipografiabetaTrês famílias com papéis fixos, mais a escala de tela que os componentes não cobrem.
• EspaçamentobetaOs tokens que descrevem a página, e não os componentes dentro dela.
• RaiobetaUm único knob. Toda a escala deriva dele.
• SombrabetaQuatro degraus de elevação, com valores próprios em cada tema.
• ÍconesbetaPhosphor é a única família. Ícone herda a cor do texto ao redor.

Padrões de tela

• Casca de telabetaA forma que toda tela autenticada tem. O que muda entre as frentes é a navegação e o miolo, nunca a casca.
• Estados de telabetaCarregando, vazia, sem permissão e com erro. Uma tela sem resposta para os quatro está incompleta.
• Cabeçalho de páginabetaUm por tela. E a faixa de identidade para registros com abas.
• Gráficos prontosbeta68 exemplos instalados (ADR-0013), por família — cada um é para copiar e adaptar, não para importar e configurar.

Blocos

• Painel do professorbetaCasca com navegação, cabeçalho de página, indicadores, tabela de turmas e atividade recente. É a tela de entrada de quem dá aula.
• Registro de turmabetaFaixa de identidade da entidade com abas, preservando nome, status e ação principal enquanto se navega entre os recortes do mesmo registro.
• Estados de telabetaCarregando, vazia, sem permissão e com erro, na mesma casca. Lado a lado porque o erro comum é desenhar só o estado cheio.
• AutenticaçãobetaEntrada da plataforma: marca, campos com descrição de apoio e o caminho alternativo do acesso institucional.

Sitemap

• Canvas de sitemapbetaO quadro X/Y: pan, zoom, enquadramento e a leitura alternativa em lista. Escrito sobre os tokens, sem dependência de terceiro.
• Nó de telabetaO cartão de uma tela, com tipo, proveniência e o selo de já existir em código.
• Faixa de fluxobetaUm fluxo em passos. Mostra o que o documento escreve e não inventa ligação com as telas.
• Menu de áreasbetaA troca de área, com as que ainda não têm sitemap visíveis em vez de escondidas.
• Pino de comentáriobetaA âncora de uma conversa num ponto ou num nó. Não encolhe com o zoom.
• Linha de comentáriosbetaO fio: responder, editar com histórico e resolver. Nada se apaga.
• Legenda de proveniênciabetaO que §, ⊢ e ★ significam — sem isso as marcas viram enfeite.

Componentes

• AccordionbetaRevela detalhe sob demanda, sem tirar o leitor da página. Se os recortes são paralelos e um exclui o outro, use Tabs.
• AI SuggestionbetaSugestão gerada por IA, apresentada como proposta que o usuário aceita ou descarta — nunca como fato já aplicado.
• AlertbetaAviso que fica na página e pode ser relido. Se some sozinho, é Toast — e aí não pode carregar nada que o usuário precise reter.
• Alert DialogbetaConfirma o que não tem volta. Não fecha ao clicar fora nem no Esc — a saída é sempre uma escolha explícita.
• Aspect RatiobetaTrava a proporção de um bloco para o layout não pular quando a mídia carrega.
• AvatarbetaIdentidade visual de uma pessoa, com iniciais quando não há foto. Em tabela, quem compõe isso com nome e contexto é o UserCell.
• BadgebetaRotula um estado ou categoria. Carrega significado, não decoração — cada variante quer dizer uma coisa.
• BreadcrumbbetaOnde o usuário está dentro de uma hierarquia, e como subir um nível. Não substitui o botão voltar do navegador.
• ButtonbetaDispara uma ação. É o único elemento que o usuário aperta esperando que algo aconteça.
• Button GroupbetaAgrupa ações relacionadas numa peça só. São botões, não estado — para estado existe Toggle Group.
• CalendarbetaEscolha de data num grid de mês. Para intervalo, existe o Date Range Picker.
• CardbetaAgrupa conteúdo relacionado numa superfície elevada, com cabeçalho, corpo e rodapé opcionais.
• ChartbetaVisualização de dados sobre recharts, com as cores vindas dos tokens de gráfico. Nunca cor literal.
• Chat PanelbetaPainel de conversa com histórico e composição de mensagem.
• CheckboxbetaMarca uma escolha que só vale quando o formulário for salvo. Se o efeito é imediato, o componente é o Switch.
• CollapsiblebetaUma unidade que abre e fecha, sem coordenação com irmãos. Se vários precisam se coordenar, o componente é o Accordion.
• ComboboxbetaSeleção com filtro por digitação. Serve quando a lista é longa demais para percorrer com o olho — abaixo disso, Select resolve.
• CommandbetaPaleta de busca e ação para quem já conhece o produto. Atalho, nunca o único caminho para alguma coisa.
• Confirm DialogbetaConfirmação de uma ação com consequência, empacotada para a tela não remontar a mesma composição toda vez.
• Context MenubetaAções no botão direito. Em toque não existe botão direito, então nada pode viver só aqui.
• Copilot DockbetaSuperfície ancorada para o assistente dentro de uma tela.
• Data TablebetaA camada de ordenação, seleção e paginação sobre a Table. Use quando a lista é grande o bastante para o usuário precisar operar sobre ela.
• Date Range PickerbetaIntervalo de datas, para relatório e filtro de período. Uma data só é papel do Calendar.
• Description ListbetaPares de rótulo e valor, para o resumo de um registro. É leitura, não formulário.
• DialogbetaUma tarefa que o usuário escolheu fazer e pode abandonar. Se abandonar for perigoso, o componente é o Alert Dialog.
• Draft StatusbetaIndica o estado de salvamento de um rascunho.
• DrawerbetaCamada que sobe pela borda, pensada para o toque. Em telas grandes, o Sheet costuma ser a escolha certa.
• Dropdown MenubetaLista de ações a partir de um gatilho. Ações, não navegação — para navegar existe link.
• EmptybetaDiz o que aquilo seria e oferece a primeira ação. Vazio sem saída é beco sem saída.
• FieldbetaA anatomia de um campo: rótulo, controle, texto de apoio e erro. Existe para que nenhuma tela remonte essa relação por conta própria.
• File UploadbetaAnexar arquivo a um registro, com o estado do envio visível. Anexo sem estado é anexo que ninguém sabe se chegou.
• Filter PanelbetaPainel de filtros aplicados sobre uma lista.
• Funnel StepbetaEtapa de funil comercial. A graduação de tom é o que comunica em que ponto a etapa está — navy estrutura, purple decisão, teal conclusão.
• Hover CardbetaPrévia de um registro ao passar o mouse. Depende de hover, então nunca substitui o caminho clicável.
• Indicator RatingbetaAvaliação de um indicador numa escala.
• InputbetaCampo de texto de uma linha. O type nativo continua valendo — o componente não reimplementa teclado numérico, e-mail ou senha.
• Input GroupbetaAdorna um campo com prefixo, sufixo ou botão sem que a tela monte a borda à mão.
• Input OTPbetaCódigo de confirmação em casas separadas. Usado na aceitação de convite, onde o usuário digita o que recebeu por outro canal.
• ItembetaLinha genérica de lista: mídia, título, apoio e ação. É o que evita cada tela inventar a própria linha.
• KbdbetaExibe uma tecla. Só isso — não registra atalho nenhum, o bind fica na aplicação.
• LabelbetaNomeia um controle e o torna clicável. Rótulo solto, sem vínculo, é armadilha de acessibilidade.
• LogobetaA marca sobre o gradiente navy–purple–teal. Um dos poucos lugares onde as três cores aparecem juntas.
• MenubarbetaBarra de menus no formato de aplicativo de desktop. Raro em produto web — quase sempre um Dropdown Menu resolve melhor.
• Native SelectbetaSeleção com o menu do próprio sistema operacional. Em formulário simples e no celular, ganha do Select em quase tudo.
• Navigation MenubetaNavegação entre destinos, não ações. Serve mais ao site institucional — nas telas autenticadas quem navega é a barra lateral da casca.
• No PermissionbetaSem acesso não é estado vazio. Aparece em fluxo normal, precisa dizer o que destrava, e é navy — bloqueio por política não é falha do usuário.
• Page HeaderbetaTítulo, descrição e ações de uma tela. Um por tela. A discussão de uso está no padrão Cabeçalho de página.
• PaginationbetaDivide uma lista longa em páginas. É controle de navegação, então cada página precisa ser endereçável.
• PopoverbetaCamada com conteúdo interativo, aberta no clique. Se é só texto curto de apoio, use Tooltip.
• ProgressbetaProgresso que se pode medir. Se você não sabe a porcentagem, não é progresso — é espera, e aí o componente é outro.
• Radio GroupbetaUma escolha entre poucas opções que precisam ficar todas visíveis. Se são muitas, ou se cabem escondidas, use Select.
• ResizablebetaPainéis com divisa arrastável, para o usuário decidir quanto espaço cada lado merece. Lista à esquerda, detalhe à direita.
• Screen SkeletonbetaA casca de toda tela autenticada: navegação, cabeçalho, miolo e seções. A discussão de uso está no padrão Casca de tela.
• Scroll AreabetaRolagem contida com barra estilizada. Só funciona com altura definida no contêiner — sem isso não rola nada.
• SelectbetaSeleção com menu próprio, para quando é preciso controlar a aparência das opções. Custa mais que o nativo — escolha sabendo disso.
• SeparatorbetaDivide blocos que não pertencem juntos. Se está ali para dar respiro, o problema é espaçamento, não linha.
• SheetbetaPainel que entra pela lateral sem tirar o usuário da lista. Bom para filtro e detalhe rápido.
• SidebarbetaA navegação lateral inteira: provider, grupos, menu, estado recolhido e comportamento em celular. Nas telas do produto ela entra pelo slot nav da casca, não montada à mão.
• SkeletonbetaReserva o espaço que o conteúdo vai ocupar. É o padrão de carregamento de tela, porque evita o salto quando os dados chegam.
• SliderbetaAjuste de um valor contínuo onde a grandeza importa mais que o número exato — teto de gastos, volume, faixa etária.
• SpinnerbetaEspera curta dentro de um controle, como um botão salvando. Para tela inteira, use Skeleton.
• Stat CardbetaUm número que importa, com rótulo e variação. O tom da variação é sobre a leitura do número, não sobre a direção da seta.
• SwitchbetaLiga e desliga com efeito imediato. Se a mudança só vale ao salvar, o componente é o Checkbox.
• TablebetaMarcação semântica de tabela, já com rolagem horizontal contida. Para ordenar, selecionar ou paginar, use Data Table.
• TabsbetaRecortes paralelos do mesmo assunto, um por vez, com a escolha nas mãos do usuário. Não use para etapas de um fluxo.
• TextareabetaResposta longa, de várias linhas. Para uma linha só, use Input — a altura é a promessa que o campo faz sobre o tamanho esperado.
• TimelinebetaEventos em ordem cronológica, com horário e detalhe. Para o que aconteceu, não para o que fazer.
• ToastbetaConfirmação que passa e some. Nunca carregue nela informação que o usuário precise reter, nem ação que ele possa perder.
• TogglebetaUm estado binário que fica visível no próprio controle — negrito ligado, filtro ativo.
• Toggle GroupbetaEscolha entre opções sempre visíveis, com o estado no próprio controle. Se as opções são muitas, use Select.
• TooltipbetaTexto curto no hover e no foco. Nunca informação essencial, nunca elemento clicável — quem usa toque não alcança.
• User CellbetaIdentificação de uma pessoa numa linha de lista. O campo secundário é parte da anatomia: é o que desambigua dois homônimos.