Componentes de layout
Componentes que organizam e revelam conteúdo: acordeões e collapsibles com animação de altura reversível no meio, um carrossel com scroll-snap, painéis divididos redimensionáveis, áreas de rolagem com bordas esmaecidas, caixas de proporção e separadores.
Painéis fechados continuam pesquisáveis pela busca do navegador, e nada pula quando o conteúdo carrega.
- AccordionTítulos empilhados que revelam cada um um painel, com movimento de altura que você pode reverter no meio e painéis que continuam pesquisáveis enquanto fechados.
- Aspect ratioUma caixa que mantém sua forma antes de a mídia carregar, exibe um shimmer durante o carregamento, faz a mídia aparecer com fade e usa um fallback quando ela falha.
- CarouselSlides nativos com scroll-snap, com inércia no toque, arrastar com o mouse, setas do teclado, pontos, miniaturas e um autoplay que pausa quando deve.
- CollapsibleUm painel que aparece e desaparece com um movimento de altura que você pode reverter no meio, sem fazer o layout pular.
- ResizablePainéis que você pode separar arrastando, com um divisor discreto que desperta no hover, tamanhos que deslizam ao redefinir ou recolher e layouts que persistem.
- Scroll areaRolagem nativa com uma barra de rolagem mínima, bordas que esmaecem apenas onde há mais a ver e um peek opcional que corta o último item ao meio.
- SeparatorUma linha fina que divide o conteúdo na horizontal ou na vertical, com rótulo opcional e um modo decorativo para linhas puramente visuais.
Usados nos blocos Pro
Blocos para produtos de IA construídos com estes componentes.
- Agent TodosO plano que um agente mantém enquanto trabalha, uma linha por etapa. Cobre etapas em andamento, etapas com falha e mudanças de plano no meio da execução.
- 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.
- Stack TraceUma falha mostrada do jeito que um desenvolvedor a lê. Seu código vem primeiro, frames do framework se recolhem e cada causa aparece em ordem.
- SubagentsAs execuções que um agente delega a outros agentes, uma linha por execução. Cobre execuções em paralelo, parar e repetir, e um resumo quando cada uma termina.
- Test ResultsA execução de testes de um agente, mostrada em tempo real. Os testes chegam em streaming e se recolhem em um resumo, com cada falha aberta e seu diff à vista.
- 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.