Phone

An iPhone-style phone mockup with dynamic island, screen area, address bar, and home indicator. Perfect for showcasing mobile UIs.

With Address Bar

Phone frame with a bottom address bar showing the URL.

With Address

omnira.space

Without Address Bar

Clean phone frame without the bottom navigation bar.

No Address

With Content

Phone frame with custom content inside the screen.

With Content

O
Welcome to OmniraYour mobile experience
app.omnira.space

Usage

Import and use the Phone component.

tsx
import { Phone } from "@/components/ui/Phone";

<Phone address="omnira.space" />

// With content
<Phone address="app.omnira.space">
    <div>Your mobile content</div>
</Phone>

Props

PropTypeDefaultDescription
addressstring—URL displayed in the bottom address bar. If omitted, the bar is hidden.
childrenReactNode—Content rendered inside the phone screen.