Phone

Display content in an iPhone-style phone frame mockup.

Import

import { Phone } from 'asterui'

Examples

Basic Phone

Simple phone mockup with centered content.

</>

Hello World

import { Phone } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-100 grid place-content-center">
        <span className="text-xl">Hello World</span>
      </Phone>
    )
}

export default App

With Image

Display an image as wallpaper.

</>

import { Phone } from 'asterui'

function App() {
  return (
      <Phone>
        <img
          src="https://img.daisyui.com/images/stock/453966.webp"
          alt="wallpaper"
          className="w-full h-full object-cover"
        />
      </Phone>
    )
}

export default App

Custom Color

Customize the phone frame color.

</>

Orange

import { Phone } from 'asterui'

function App() {
  return (
      <Phone color="#ff8938" displayClassName="bg-gradient-to-b from-orange-400 to-orange-600 grid place-content-center">
        <span className="text-white text-xl font-bold">Orange</span>
      </Phone>
    )
}

export default App

App Interface

Mock up a mobile app layout.

</>

My App

Item 1

Item 2

Item 3

Action

import { Phone, Button } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-100 flex flex-col">
        <div className="bg-primary text-primary-content p-4">
          <h2 className="font-bold">My App</h2>
        </div>
        <div className="flex-1 p-4 space-y-3">
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 1</div>
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 2</div>
          <div className="bg-base-200 rounded-lg p-3 text-sm">Item 3</div>
        </div>
        <div className="p-4 border-t border-base-300">
          <Button color="primary" size="sm" className="w-full">Action</Button>
        </div>
      </Phone>
    )
}

export default App

Chat Interface

Mock up a chat app layout.

</>

Jane

Hey! How are you?

Hi there! I'm good!

Great to hear!

import { Phone } from 'asterui'

function App() {
  return (
      <Phone displayClassName="bg-base-200 flex flex-col">
        <div className="bg-base-100 p-3 border-b border-base-300 flex items-center gap-3">
          <div className="avatar">
            <div className="w-8 rounded-full">
              <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=jane" alt="" />
            </div>
          </div>
          <span className="font-medium text-sm">Jane</span>
        </div>
        <div className="flex-1 p-3 space-y-2 overflow-auto">
          <div className="chat chat-start">
            <div className="chat-bubble chat-bubble-primary text-xs">Hey! How are you?</div>
          </div>
          <div className="chat chat-end">
            <div className="chat-bubble text-xs">Hi there! I'm good!</div>
          </div>
          <div className="chat chat-start">
            <div className="chat-bubble chat-bubble-primary text-xs">Great to hear!</div>
          </div>
        </div>
      </Phone>
    )
}

export default App

API

Phone

Property	Description	Type	Default
children	Content inside the phone screen	React.ReactNode	-
color	Custom frame color	string	-
className	Classes for phone container	string	-
displayClassName	Classes for display area	string	-

Accessibility

• Phone mockup is decorative - content inside should be accessible
• Images inside should have appropriate alt text
• Interactive elements inside remain fully accessible