Componentes de exibição de dados
Componentes para mostrar informação: uma tabela de dados com ordenação, seleção e colunas fixas, gráficos do Recharts que seguem o tema, uma árvore, cards, itens de lista, badges, avatares, teclas e números que rolam até o novo valor.
Eles também cuidam dos casos densos, com cabeçalhos de tabela fixos, colunas fixadas e navegação por teclado entre os pontos do gráfico.
- AvatarFotos de usuário com fallback de iniciais, badges de status e grupos empilhados que se recolhem em uma contagem.
- BadgeRótulos de status com pontos coloridos, tags removíveis que deslizam até fechar e contagens que rolam até o novo valor.
- CardUma superfície para agrupar conteúdo, com três variantes, mídia de ponta a ponta, raios concêntricos e links no card inteiro.
- ChartGráficos do Recharts com cores do tema, um tooltip e uma legenda que leem os rótulos de uma única configuração, e navegação por teclado com um anel de foco visível.
- Data tableUma tabela para dados reais, com ordenação, busca, seleção de linhas, colunas fixadas, cabeçalho fixo e paginação.
- ItemUma linha de mídia, texto e ações para listas, configurações e seletores, com uma superfície agrupada e um destaque de hover que desliza entre as linhas.
- KbdTeclas para atalhos que mostram os símbolos certos em cada plataforma, são lidas corretamente por leitores de tela e afundam com as teclas reais.
- Number flowNúmeros animados em que só os dígitos alterados giram, com qualquer formato Intl e locale.
- TableUma tabela responsiva com estilo de superfície, células com quebra de linha ou compactas, cabeçalhos fixos, colunas fixadas e indicações de rolagem.
- TreeLinhas aninhadas e expansíveis para arquivos e hierarquias, com guias de recuo, linhas conectoras, checkboxes em cascata, typeahead e suporte completo ao teclado.
Usados nos blocos Pro
Blocos para produtos de IA construídos com estes componentes.
- Chat SidebarA barra lateral de um app de chat, com chats fixados, projetos e recentes. Cobre renomear no lugar, excluir com desfazer e chats ainda respondendo.
- Diff ReviewUma revisão das edições de arquivos de um agente antes de serem aplicadas. Cobre aceitar ou rejeitar cada mudança, comentários de volta ao agente e edições ainda em streaming.
- ThinkingA visualização de raciocínio de um chat de IA. Um rótulo ao vivo segue cada etapa, buscas e fontes se recolhem em uma trilha e as citações ficam ao lado da resposta.
- ProfileA seção Perfil das configurações de um produto de IA. Cobre o recorte de foto, um nome de usuário verificado enquanto você digita e mudanças de e-mail confirmadas por código.
- SettingsA página de configurações de um produto de IA. Cobre uma barra de salvar que aparece só quando algo mudou, erros de campo e estados de carregamento.
- TeamA página de equipe das configurações do workspace de um produto de IA. Cobre assentos que acabam, convites pendentes e transferência de propriedade com confirmação digitada.