Photonix

StatusBar

Simulated mobile status bar for prototypes.

Preview

9:41
Usage
"use client";

import { Box, StatusBar } from '@photonix/ultimate';

export default function StatusBarBasicExample() {
    return (
        <Box bg="secondary" borderRadius="lg" overflow="hidden" w={360} maxW="100%">
            <StatusBar variant="ios" theme="light" time="9:41" />
        </Box>
    );
}

Component API

StatusBar

Prop
Type
Default
Description
variant
"ios" | "android"
'ios'
Platform variant
theme
"light" | "dark"
'light' (Dark text for light backgrounds)
Color theme for text/icons
time
string
'9:41'
Time to display
showCameraCutout
boolean
true
Show camera cutout (Android only)
className
string
-
style
React.CSSProperties
-

On this page

Preview
Component API
Photonix UI - React Components, Templates & Figma Design System