# Postigo

Uma janela do Safari desenhada em SVG, com barra de endereço e o print do seu site ocupando a página.

> Postigo é um componente do THM Componentes que desenha uma janela do navegador Safari em SVG, com botões, ícones e barra de endereço, e mostra o print do seu site ou sistema na área da página. O endereço exibido é configurável, as cores mudam no modo escuro e o componente funciona bem em portfólios, pitches e estudos de caso.

- Categoria: Imagem e mídia
- Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript, Tailwind CSS v4
- Interação: Nenhuma: o efeito roda sozinho
- URL: https://vibecode.thmtecnologia.com/componentes/postigo/

## Como ele é

Imagine a janela do Safari no Mac, desenhada em traço limpo e sem nenhuma distração. No alto fica uma barra com três bolinhas cinza no canto, como os botões da janela, os ícones de barra lateral, voltar e avançar, e no centro o campo de endereço com cadeado, o texto que você define e o botão de recarregar. À direita aparecem os ícones de compartilhar, nova aba e abas. Abaixo da barra, a imagem que você passa ocupa toda a página, com os cantos de baixo arredondados. No modo claro, a moldura é cinza-claro e branca; no escuro, grafite. Não há animação.

## Você pode estar procurando isto se pediu algo assim

- “mostrar o print do meu site dentro de uma janela de navegador”
- “moldura de navegador para colocar a tela do sistema no portfólio”
- “aquela janela do Safari com o site dentro, tipo apresentação da Apple”
- “deixar o print do painel com cara de produto de verdade”
- “imagem do site num navegador desenhado com o meu domínio na barra”
- “mockup de browser para o estudo de caso do cliente”

## Também chamado de

mockup de navegador, browser mockup, print dentro do navegador, moldura de navegador, browser frame, mockup de site

## Quando usar

- Estudo de caso de site ou sistema no portfólio
- Pitch ou proposta comercial com telas do produto web
- Seção de destaque mostrando o painel de um SaaS
- Páginas de lançamento que exibem o site novo do cliente

## Quando evitar

- Quando a página precisa ser navegável, já que a moldura recebe só uma imagem
- Telas de celular, que ficam espremidas no formato largo da janela

## Como pedir para a sua IA

```text
Crie uma moldura de navegador Safari em SVG para o estudo de caso do meu portfólio, com o print do site preenchendo a página, o domínio do cliente na barra de endereço, cores que acompanhem o modo escuro e tamanho responsivo no celular.
```

Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.

## Perguntas sobre Postigo

### Dá para mudar o endereço que aparece na barra de Postigo?

Sim. Postigo recebe o texto da barra de endereço pela prop url e o mostra ao lado do cadeado, em letra pequena e cinza. Na demo aparece um domínio de exemplo; troque pelo domínio do cliente ou do seu produto para o print ficar coerente.

### Dá para mostrar meu site funcionando dentro de Postigo?

Na versão do catálogo, não: Postigo exibe uma imagem pela prop src, recortada para preencher a área abaixo da barra. Para um site navegável, peça à IA para sobrepor um iframe ou o próprio HTML a essa área, com os cantos de baixo arredondados.

### Postigo funciona no modo escuro?

Sim. Postigo usa a classe dark do Tailwind: moldura cinza-claro e barra branca no modo claro, grafite e quase preto no escuro, com ícones cinza nos dois. O prompt do THM Componentes orienta a IA a substituir esses tons fixos pelos tokens de cor do seu projeto.

## Componentes relacionados

- [Estojo](https://vibecode.thmtecnologia.com/componentes/estojo/): Um iPhone desenhado em SVG, com a ilha no topo e o print do seu app ocupando a tela.
- [Cavalete](https://vibecode.thmtecnologia.com/componentes/cavalete/): Uma tela de produto que começa inclinada para trás e fica de frente enquanto a página rola, com o título subindo.
- [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar.
- [Monóculo](https://vibecode.thmtecnologia.com/componentes/monoculo/): Um círculo de aumento segue o mouse sobre a foto e mostra os detalhes ampliados, sem sair do lugar.
- [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.