Mockup

Browser / window / phone frame

Device chrome around a screenshot or a live piece of UI — for docs, a marketing page, a "what you'll get" panel. This site's homepage hero and OG card are a browser mockup around a screenshot. browser shows three dots and an address bar (title), window three dots and a title, phone a notch and a home bar; dark for a dark frame. A bare <img> or <video> inside fills the screen.

The phone's rounded corners are the device, not the shape system — a phone with cut corners reads as a television. The frame is aria-hidden decoration; whatever you put on the screen is the accessible content.

Basic

saenai.tv/news

Blu-ray Disc BOX

Terminal

$ pnpm add blessing-ui

第1話

冴えないヒロインの育てかた · 24:00

<script setup lang="ts">
import { BlessButton, BlessMockup, BlessText } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessMockup title="saenai.tv/news" style="width: 360px">
      <div style="padding: 16px">
        <BlessText as="p" weight="bold">Blu-ray Disc BOX</BlessText>
        <BlessButton size="sm">詳細</BlessButton>
      </div>
    </BlessMockup>
    <BlessMockup type="window" title="Terminal" dark style="width: 300px">
      <pre style="margin: 0; padding: 12px; font-size: 12px">$ pnpm add blessing-ui</pre>
    </BlessMockup>
    <BlessMockup type="phone" style="width: 200px">
      <div style="padding: 16px; font-size: 12px">
        <BlessText as="p" weight="bold">第1話</BlessText>
        <BlessText as="p" size="xs" muted>冴えないヒロインの育てかた · 24:00</BlessText>
      </div>
    </BlessMockup>
  </div>
</template>

Usage

import { BlessMockup } from "blessing-ui";

API

Props

Name	Type	Default	Description
type	"browser" | "phone" | "window"	"browser"
title	string	""	address bar text (browser) or title (window)
dark	boolean	—	frame colour

Slots

Name	Scope	Description
default	—