Smartphone Mockup

Display

Mockup CSS de smartphone, notch estilo iPhone ou câmera central estilo Pixel — adaptado de cuicui.day.

Instalação via CLI

$ npx kikitocn add smartphone-mockup

Interno:

@/lib/utils

Exemplo de uso

Smartphone MockupExample.tsx

import { SmartphoneMockup } from "@/components/ui/cn/smartphone-mockup/SmartphoneMockup";

export function SmartphoneMockupExample() {
  return (
    <SmartphoneMockup variant="iphone">
      Smartphone Mockup
    </SmartphoneMockup>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`variant`	`'iphone' \| 'pixel'`	`'iphone'`	Estilo da moldura do aparelho
`src`	`string`	—	URL de imagem pra tela (ignorado se `children` for passado)
`alt`	`string`	—	Texto alternativo da imagem padrão
`children`	`React.ReactNode`	—	Conteúdo customizado da tela — sobrepõe `src`
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…

Smartphone Mockup

Smartphone Mockup

Variantes

Variantes