Primitivedata-display

Safari

Stable

A safari browser mockup to showcase your website.

Instalação

npx up-web-ds add safari

Preview

Default

Simple

Video

All states

Default

Simple

Video

Usage

@/components/ui/safari

import { Safari } from '@/components/ui/safari'

Safari

<Safari imageSrc={screen} url="upweb.studio" className="max-w-4xl" />

Props

Props de Safari
Prop	Type	Default
imageSrc	`string`	sem valor padrão
mode	`SafariMode`	`'default'`
url	`string`	sem valor padrão
videoSrc	`string`	sem valor padrão

Estende SafariProps. Aceita também os atributos padrão de um elemento React (278 não listados).

Metadata

Notas de acessibilidade

Verificado em safari.test.tsx e tests/e2e/safari.spec.ts no Chromium desktop e mobile. O mockup é apresentação: não cria parada de tabulação nem captura teclado ou toque, e o chrome SVG e a mídia ficam fora da árvore de acessibilidade. Imagem e vídeo são conteúdo decorativo dentro da moldura; o texto da URL também pertence ao desenho, sem anunciar uma segunda interface de navegador. O vídeo é muted, playsInline e tabIndex={-1}; sob prefers-reduced-motion: reduce, autoplay e loop são removidos, deixando o primeiro quadro estático. IDs de máscara são únicos por instância, evitando que duas molduras na mesma página compartilhem recortes.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: magic registry / safari
Licença: MIT
URL: https://magicui.design/r/safari.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda