Claude

Biblioteca .brain/ui

51 componentes · 148 variações
Início

Botões2 componentes · 22 variações

Botões

Variantes, tamanhos, ícone e carregando.

primáriosecundárioghostloading
8 variações
Botões · variações

Catorze variações do mesmo .k-btn, todas só com tokens: troque a paleta em tokens.css e todas acompanham. Para trazer um estilo do uiverse.io, use "Adaptar do Uiverse" no topo.

outlinegradientevidro3dfabuiverse
14 variações

Formulários6 componentes · 22 variações

Informe um e-mail válido.
Até 500 caracteres.
Campos de texto

Rótulo, ajuda, erro e textarea. Grid que vira uma coluna no celular.

inputtextareaerro
3 variações
Arraste os arquivos aquiou clique para escolher · PDF, PNG, JPG até 10 MB
    Upload de arquivos

    Zona de arrastar e soltar com lista de arquivos.

    dragdroparquivo
    R$ BRL
    Aparece na busca e no compartilhamento.
    Campos em oito formas

    Ícone, prefixo e sufixo, senha com olho, contador de caracteres, três tamanhos, só leitura e campo com botão.

    íconeprefixosenhacontador
    8 variações
    Validamos o dígito verificador.
    Da empresa que vai receber a nota.
    Com DDD.
    Preenche o endereço sozinho.
    Nunca guardamos o número completo.
    R$
    Digite só os números; a vírgula entra sozinha.
    Campos com máscara

    CPF, CNPJ, telefone, CEP, cartão e moeda em reais — formatam enquanto se digita e validam ao sair.

    cpfcnpjtelefonemoeda
    6 variações
    Quantidade
    Máximo de 20 por pedido.
    Desconto 15% De 0 a 50%, de 5 em 5.
    Faixa de preço
    Quantidade e faixa

    Contador com mais e menos, controle deslizante com valor e faixa de dois polegares para preço.

    steppersliderrangequantidade
    3 variações
    Código enviado para +55 45 ••••-4821

    Cole o código inteiro em qualquer casa — ele se distribui.

    Código de verificação

    Seis casas que avançam sozinhas, aceitam o código colado inteiro e voltam com Backspace.

    otpcódigo2facolar

    Seleção9 componentes · 29 variações

    Controle segmentado

    Alternância entre 2 a 5 opções, como um radio visual.

    toggleradio
    Checkbox, radio e switch

    O básico dos três controles. As variações completas ficam nos componentes seguintes.

    checkboxradioswitch
    5 variações
    Plano da conta
    Radio em cards

    Escolha única quando cada opção precisa de descrição e preço. O card inteiro é a área de clique.

    radioplanocardpreço
    3 variações
    Entrega
    Como quer receber
    Visualização
    Radio em pílulas e blocos

    Três formas do mesmo radio para respostas curtas: pílulas, blocos com ícone e barra unida.

    radiopílulaíconetoggle
    3 variações
    Frete
    Quem pode ver este painel
    Radio em lista

    Opções longas com explicação e um valor à direita. A linha inteira responde ao clique.

    radiolistaconfigurações
    2 variações
    Cor Grafite
    Tamanho
    G está esgotado nesta cor.
    Material
    Cor, tamanho e material

    Radio virando amostra: círculos de cor, grade de tamanhos com esgotado e blocos de material.

    swatchcortamanhoproduto
    3 variações
    Como foi o atendimento?
    Você indicaria a Kahne para um colega?
    Não indicariaIndicaria com certeza
    E a entrega?
    Avaliação e nota

    Estrelas, NPS de 0 a 10 e carinhas. Tudo com radio de verdade — funciona sem JS e com teclado.

    estrelasnpsratingpesquisa
    3 variações
    Colunas do relatório
    Filtrar por etiqueta
    Integrações ativas
    Ao excluir
    Checkbox em quatro formas

    Lista com pai indeterminado, cards de múltipla escolha, chips e checkbox com descrição.

    checkboxindeterminadocardschips
    4 variações
    Switch em cinco estados

    Três tamanhos, com ícone de sol e lua, em lista de preferências, salvando e desligado.

    switchtoggletamanhospreferências
    5 variações

    Dropdowns10 componentes · 18 variações

    Status
    • Ativo
    • Pausado
    • Arquivado⌘A
    Select customizado

    Substitui o select nativo: placeholder, ícones, teclado e clique fora.

    selectlistboxteclado
    Categorias
    Multi-seleção

    Vários valores com busca, checkbox e chips do que foi escolhido.

    multichipsbusca
    • Cascavel, PR
    • Curitiba, PR
    • Campinas, SP
    • Campo Grande, MS
    • Caxias do Sul, RS
    • Florianópolis, SC
    • Foz do Iguaçu, PR
    Autocomplete

    Campo que filtra enquanto digita. Setas e Enter escolhem.

    comboboxbuscaautocomplete
    Menu de ações

    Menu contextual com ícones, atalho e ação destrutiva separada.

    menuaçõescontextual
    4 variações
    Responsável
    • ASAna SouzaDesign
    • BLBruno LimaPesquisa
    • CDCarla DiasBackend
    • DRDiego ReisFront
    • EMElis MoraesDados
    • FNFábio NunesSuporte
    Select com grupos e busca

    Lista longa organizada em seções, com filtro por digitação, avatar e função de cada pessoa.

    selectgruposbuscapessoas
    KS Jardel Kahnejardel@kahne.systems
    Menu da conta

    O menu do canto superior direito: identidade, atalhos, troca de tema e sair, tudo num popover só.

    contaavatarperfilmenu
    Paleta de comandos

    Busca única para navegar e agir. Abre com Ctrl K, filtra ao digitar e anda com as setas.

    commandatalhobuscateclado
    Marcadores
    • urgente
    • reembolso
    • primeira-compra
    • assinatura
    • fraude
    • b2b
    Enter ou vírgula cria. Backspace com o campo vazio remove o último.
    Campo de marcadores

    Digite e tecle Enter para criar um marcador, Backspace apaga o último e as sugestões filtram junto.

    tagschipssugestõesinput
    Menu em cascata

    Submenus que abrem ao lado no hover e no foco. No celular eles viram uma lista indentada.

    submenucascatamovermenu
    Versão pequena, para barras de ferramenta.
    Escolha uma forma de pagamento.
    Definida pelo país da conta.
    Select nativo vestido

    O <select> do navegador com a cara do sistema: tamanhos, grupos, erro, desabilitado e múltiplo.

    selectnativooptgroupacessível
    6 variações

    Datas10 componentes · 27 variações

    Vencimento
    Seletor de data

    Calendário customizado em dropdown: hoje, navegação por mês, limpar.

    datacalendáriodropdown
    Período do relatório
    Período (de – até)

    Mesmo calendário com seleção de intervalo e presets: hoje, 7, 30 dias, este mês.

    períodorangepresets
    4 variações
    Horário
      Seletor de hora

      Dropdown de horários em passos de 15 min, com busca por digitação.

      horatimedropdown

      Período rápido

      A barra que fica no topo de todo dashboard: escolhe o recorte e mostra o intervalo que ele virou.

      períodoatalhodashboardrelatório
      6 variações
      Período do relatório
      Período com dois meses

      Dois meses lado a lado, presets na lateral, prévia do intervalo ao passar o mouse e Aplicar/Cancelar.

      períodorangepresetscalendário
      Últimos
      Período relativo

      Em vez de duas datas fixas, uma regra que se recalcula sozinha: "últimos 30 dias", com comparação.

      relativoúltimoscompararregra
      Data de nascimento
      / /
      Pula de campo sozinho e volta com Backspace.
      Um campo só, com as barras automáticas.
      Data digitada

      Para quem sabe a data de cor: três campos que pulam sozinhos, ou um campo só com máscara.

      máscaradd/mm/aaaadigitarvalidação
      2 variações
      Competência
      Mês, trimestre e ano

      Quando o relatório é fechado por competência, ninguém quer escolher dia. Três recortes num popover.

      mêstrimestreanocompetência
      3 variações
      Manhã
      Tarde
      Horários disponíveis

      Agenda em duas etapas: a faixa de dias e a grade de horários por turno, com os ocupados travados.

      agendahorárioreservaslots
      2 variações
      Só aceita a partir de hoje.
      Intervalo
      até
      Campos nativos de data

      date, time, month, week e datetime-local vestidos com os tokens — teclado do celular e leitor de tela de graça.

      nativodatetimeweek
      6 variações

      Dados5 componentes · 13 variações

      PedidoClienteStatusTotalData
      #1042Ana SouzaPagoR$ 1.290,0008/09/2026
      #1041Bruno LimaPendenteR$ 349,9008/09/2026
      #1040Carla DiasCanceladoR$ 89,0007/09/2026
      #1039Diego ReisPagoR$ 2.410,0007/09/2026
      1–4 de 128
      Tabela responsiva

      Cabeçalho fixo, ordenação, badges e paginação. Vira cartões abaixo de 640px.

      tabelaordenarpaginação
      • AS
        Ana Souza
        ana@empresa.com · Admin · há 2 h
      • BL
        Bruno Lima
        bruno@empresa.com · Financeiro · ontem
      • CD
        Carla Dias
        carla@empresa.com · Suporte · há 5 dias
      Lista

      Avatar, título, meta e ações. As ações descem de linha no celular.

      listaavatarações
      Receita (30 d)R$ 84,2 mil+12,4%
      Pedidos1.284+3,1%
      Cancelamentos2,3%−0,4 pp
      Cards de indicador

      Grade de KPIs com variação. Auto-ajusta as colunas.

      kpicarddashboard
      3 variações
      Padrão Novo Pago Pendente Cancelado Em análise Online
      Badges e status

      Etiquetas de status com cor semântica.

      badgestatustag
      7 variações

      1 filtro ativo

      Barra de filtros

      Busca + chips com contagem + limpar.

      filtrobuscachips

      Navegação2 componentes · 3 variações

      Conteúdo do resumo.
      Abas

      Abas acessíveis com setas do teclado.

      tabsabas
      1. ✓Carrinho
      2. 2Entrega
      3. 3Pagamento
      4. 4Confirmação
      Breadcrumb e passos

      Caminho de navegação e indicador de etapas.

      breadcrumbstepperwizard
      2 variações

      Feedback6 componentes · 13 variações

      Excluir pedido #1042?

      Essa ação não pode ser desfeita. O estoque volta automaticamente.

      Modal de confirmação

      Usa <dialog> nativo: foco preso, Esc e fundo escurecido.

      modaldialogconfirmar
      Toast

      Notificações empilhadas: kToast(mensagem, tipo).

      toastnotificação
      3 variações
      Nova versão disponível.Atualize para ver os relatórios novos.
      Backup concluídohoje às 03:00.
      Alertas

      Mensagens em linha com ação e fechar.

      alertavisoerro
      3 variações

      Nenhum pedido ainda

      Quando o primeiro chegar, ele aparece aqui.

      Vazio e carregando

      Estado vazio com ação e skeleton de carregamento.

      emptyskeletonloading
      2 variações
      Importação · 68%
      Backup · concluído

      Passe o mouse no ou no .

      Progresso e tooltip

      Barra de progresso com rótulo e tooltip por hover/foco.

      progresstooltip
      3 variações
      Como funciona a cobrança?

      Mensal, no cartão cadastrado. Você pode cancelar quando quiser.

      Posso mudar de plano?

      Sim, a diferença é calculada proporcionalmente.

      Tem nota fiscal?

      Emitida automaticamente em até 24 horas.

      Acordeão

      Perguntas e respostas com <details>, sem JS.

      accordionfaqdetails

      Layout1 componente · 1 variação