{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "mockup",
  "name": "Mockup",
  "category": "Layout & utilities",
  "description": "Browser, window and phone frames for screenshots, demos and landing pages.",
  "tags": [
    "mockup",
    "browser frame",
    "phone frame",
    "device",
    "window",
    "terminal",
    "screenshot"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "browser frame",
      "phone mockup",
      "app screenshot frame",
      "device frame"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/mockup",
  "markdownUrl": "https://mian.ro/ai/components/mockup.md",
  "classes": [
    {
      "name": "mn-mockup-browser",
      "description": "A browser window: mn-mockup-bar (with mn-mockup-url) and mn-mockup-body."
    },
    {
      "name": "mn-mockup-window",
      "description": "A terminal/code window."
    },
    {
      "name": "mn-mockup-phone",
      "description": "A phone frame with mn-mockup-screen inside; --_w sets the width."
    }
  ],
  "accessibility": [
    "Frames are decoration: the content inside must make sense on its own. If a frame only holds an image, give the image good alt text."
  ],
  "examples": [
    {
      "title": "Browser",
      "description": null,
      "html": "<div class=\"mn-mockup-browser\" style=\"max-width:34rem;margin:auto\">\n  <div class=\"mn-mockup-bar\"><span class=\"mn-mockup-url\">mian.ro</span></div>\n  <div class=\"mn-mockup-body mn-stack\" style=\"--mn-gap:.75rem\"><h3 class=\"mn-h4\" style=\"margin:0\">Interfaces cooked differently.</h3><div class=\"mn-row\"><button class=\"mn-btn mn-btn-sm\">Get started</button><button class=\"mn-btn mn-btn-sm mn-btn-outline\">Components</button></div></div>\n</div>"
    },
    {
      "title": "Window and phone",
      "description": null,
      "html": "<div class=\"mn-mockup-window\" style=\"max-width:22rem\">\n  <div class=\"mn-mockup-bar\">zsh</div>\n  <div class=\"mn-mockup-body\">$ curl -O https://mian.ro/r/calendar.json\n✓ calendar.json saved</div>\n</div>\n<div class=\"mn-mockup-phone\" style=\"--_w:11rem\"><div class=\"mn-mockup-screen\"><div style=\"padding:3rem 1rem 1rem\" class=\"mn-stack\"><strong>Mian</strong><div class=\"mn-progress\" role=\"progressbar\" aria-label=\"Loading\" aria-valuenow=\"60\" style=\"--_v:60%\"></div><button class=\"mn-btn mn-btn-sm mn-btn-block\">Continue</button></div></div></div>"
    }
  ],
  "css": ".mn-mockup-browser, .mn-mockup-window {\n  width: 100%; overflow: hidden;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-card); box-shadow: var(--mn-shadow-lg);\n}\n.mn-mockup-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-surface-2); }\n.mn-mockup-bar::before { content: \"\"; flex: none; width: 2.6rem; height: .7rem; background: radial-gradient(circle, var(--mn-input) 0 .3rem, transparent .32rem) 0 0 / .95rem .7rem repeat-x; }\n.mn-mockup-url { flex: 1; min-width: 0; max-width: 28rem; margin-inline: auto; padding: .3rem .75rem; border-radius: 999px; background: var(--mn-card); color: var(--mn-muted); font: 400 .75rem/1.2 var(--mn-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mn-mockup-body { padding: 1.25rem; }\n.mn-mockup-window .mn-mockup-body { background: var(--mn-fg); color: var(--mn-bg); font: 400 .8125rem/1.7 var(--mn-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }\n.mn-mockup-window .mn-mockup-bar { justify-content: flex-start; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font); }\n.mn-mockup-phone {\n  --_w: 17rem;\n  position: relative; width: min(var(--_w), 100%); aspect-ratio: 9 / 19; padding: .6rem;\n  border-radius: 2.6rem; background: var(--mn-fg); box-shadow: var(--mn-shadow-lg);\n}\n.mn-mockup-phone::before { content: \"\"; position: absolute; z-index: 1; top: 1.05rem; left: 50%; width: 30%; height: 1.35rem; translate: -50% 0; border-radius: 999px; background: var(--mn-fg); }\n.mn-mockup-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 2.05rem; background: var(--mn-bg); color: var(--mn-fg); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/mockup.json"
  }
}