Skip to content
DOL Studio

Mockup UI (Status bar, Indicator, Browser)

Design: Stable Code: Coded mockupmarketing 2 Figma sets 14 standalone Mockup UI element/Browser footer w address bar

Live preview

BrowserChrome — macOS Chrome (light + dark)
App screenshot goes here
Dark app screenshot
StatusBar — iOS (9:41 canonical + custom time)
Light status bar over content
Dark status bar · custom time
HomeIndicator — iOS bottom pill
Light theme content
Dark theme content
Full mobile mockup composition
App content area · screenshot goes here

Import & files

Import
import { Mockup UI (Status bar, Indicator, Browser) } from "@dol/ui/mockup-ui";
Source file
packages/@dol/ui/src/mockup-ui/MockupUi.tsx

Figma source

Figma source 2 sets
Page
Mockup UI | Status bar, Indicator, Browser...
Sets
2 + 14 standalone
Primary set
Mockup UI element/Browser footer w address bar · 6 variants Open in Figma →
Showing: Mockup UI element/Browser footer w address bar
1 other set
  • Mockup UI element/Status Bars w address 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Mockup UI (Status bar, Indicator, Browser)
Slug: `mockup-ui`
Domain: general · Category: layout
Design: stable · Code: coded


## Description
OS / browser chrome mockups - Chrome browser header (light + dark), microphone access prompt, home indicator. Use only in marketing/wireframe.


## Import
```ts
import { Mockup UI (Status bar, Indicator, Browser) } from "@dol/ui/mockup-ui";
```
Source: `packages/@dol/ui/src/mockup-ui/MockupUi.tsx`


## Figma source
Page: Mockup UI | Status bar, Indicator, Browser...
Sets: 2
Primary: Mockup UI element/Browser footer w address bar
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=30409-447956

Related

  • M
    audio

    Media

    Design only
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

  • IconBox

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).