---
title: Frame
description: >-
O Frame envolve imagens e demonstrações em um contêiner com borda e legendas opcionais, mantendo a consistência visual da 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 Frame envolve imagens e demonstrações em um contêiner com borda e legendas opcionais.
As capturas de tela mostram a interface em inglês.
Use o Frame quando quiser:
- Dar às capturas de tela e imagens da interface um acabamento profissional
- Adicionar legendas para explicar o que os leitores estão vendo
- Diferenciar a saída de demonstrações do conteúdo regular
- Criar consistência visual em toda a documentação
## Uso
```mdx
```
## Frame básico
```mdx
```
## Com legenda
Adicione uma legenda abaixo do frame:
```mdx
```
## Enquadrar outro conteúdo
O Frame funciona com qualquer conteúdo, não apenas imagens:
```
✓ Build completed successfully
✓ 42 pages generated
✓ Deployed to production
```
## Quando NÃO usar o Frame
- **Imagens decorativas inline** — imagens Markdown comuns são suficientes para ilustrações
- **Ícones ou gráficos pequenos** — o Frame adiciona um peso visual desnecessário
- **Imagens que acompanham o texto** — o Frame cria uma separação visual; use-o para elementos visuais independentes
## Práticas recomendadas
- **Mantenha as legendas concisas** — uma frase que explique o que o leitor está vendo
- **Use de forma consistente** — se você enquadrar uma captura de tela, enquadre todas para manter a consistência visual
- **Não use frames em excesso** — reserve-os para elementos visuais importantes, não para todas as imagens da página
## Props
Texto opcional abaixo do frame.
## Próximos passos?
Veja todos os componentes disponíveis
Saiba como usar componentes em MDX