--- title: Visão geral dos componentes description: >- Explore os componentes MDX do Jamdesk, incluindo cartões, abas, destaques e blocos de código, para escolher a opção certa para sua documentação. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. O Jamdesk inclui componentes MDX que você pode usar em qualquer página. Esta visão geral ajuda você a escolher o componente certo para seu conteúdo. ## Uso Insira os componentes diretamente no seu MDX: ```mdx Launch your docs in minutes. ``` ## Layout e navegação Seções de conteúdo recolhíveis que permitem aos usuários expandir apenas o que precisam. Ideais para perguntas frequentes, listas de recursos e opções de configuração. Aprenda a usar o componente Card para criar contêineres estilizados e clicáveis com ícones, imagens, links e CTAs em layouts de grade. Layout de grade responsivo para exibir Cards, Tiles e outros conteúdos lado a lado. Adapta-se automaticamente ao tamanho da tela. O Frame envolve imagens e demonstrações em um contêiner com borda e legendas opcionais, mantendo a consistência dos recursos visuais da documentação. Use o Panel para fixar conteúdos personalizados, como avisos ou referências rápidas, na barra lateral, mantendo-os visíveis enquanto os leitores rolam a página. Guias numerados passo a passo para fluxos de configuração, tutoriais e solução de problemas. Aceita ícones, blocos de código e conteúdo aninhado. Painéis alternáveis para conteúdos mutuamente exclusivos, como gerenciadores de pacotes ou linguagens. Títulos de abas correspondentes são sincronizados em toda a página. Tiles exibem prévias de conteúdo com um fundo de padrão estilizado e uma área de imagem em destaque. Use-os para integrações, modelos ou galerias visuais. Exiba hierarquias de arquivos e pastas com expansão e recolhimento interativos e navegação pelo teclado. Ideal para documentar a estrutura de projetos. Crie uma documentação que se adapte à escolha de framework ou linguagem do leitor. Seções inteiras alternam com base na seleção do usuário. ## Conteúdo e destaque Rótulos em linha para status, categorias e metadados -- 11 variantes de cor, 4 tamanhos, ícones, formatos de pílula ou arredondados e contornos. Aprenda a usar os componentes Note, Tip, Warning, Danger, Check e Callout personalizados para destacar informações importantes na sua documentação. Expandable cria um controle simples de exibição ou ocultação para conteúdos que os leitores talvez queiram ver, mas que não são essenciais ao fluxo principal. Exiba definições e contexto ao passar o cursor. Defina termos, explique acrônimos ou crie links para conteúdos relacionados sem poluir a página. Entradas de changelog em formato de linha do tempo, com datas, descrições e tags de categoria. Integra-se ao índice para facilitar a navegação. Mostre conteúdos diferentes para leitores humanos e agentes de IA na mesma página. Contexto, instruções e definições exclusivos para agentes que permanecem fora da documentação renderizada. ## Código e dados Exiba blocos de código em uma interface com abas. Mostre a mesma operação em várias linguagens, como cURL, Python e JavaScript. Fixe blocos de código em uma barra lateral direita fixa no desktop para que os leitores possam consultá-los enquanto rolam a página. Aceita linguagens em abas. Documente parâmetros de API e campos de resposta com os componentes ParamField e ResponseField. Aceita tipos, valores padrão e objetos aninhados. Use o Prompt para apresentar instruções de IA reutilizáveis com cópia, ações integradas de abertura, destinos personalizados, ícones e opções de exibição compacta. Organize dados em linhas e colunas. Aceita tabelas Markdown e componentes Table com ordenação, destaque e mesclagem de células. ## Diagramas e recursos visuais O componente Color exibe paletas de cores para documentar sistemas de design, diretrizes de marca ou qualquer especificação de cores. Renderize fluxogramas, diagramas de sequência, linhas do tempo, gráficos de pizza e muito mais usando a sintaxe Mermaid baseada em texto. Os diagramas são criados como SVG no momento do build. Renderize diagramas de arquitetura, fluxogramas, sequências e modelos SQL usando a sintaxe D2 baseada em texto. Os diagramas são renderizados como SVG com temas claro e escuro automáticos. ## Engajamento Adicione um formulário de inscrição em newsletter ou changelog a qualquer página de documentação com o componente EmailSubscribe: captura nativa para sete provedores e incorporações para os demais. Incorpore uma demonstração ao vivo do widget What's New na sua documentação com o componente MDX Widget: um botão acionador que abre seu changelog em uma janela modal, sem precisar de uma tag de script.