Browser and phone frame
Browser window and phone frame for screenshots and live components.
4 variantsOne of 7 components in Media
Variants
Details
What Browser and phone frame brings along, read from the registry and the source.
- Category
- Media
- Area
- Elements
- Variants
- 4
- Version
- 1.1.0 · since 1.0.0
- File
- components/ui/frame.tsx
- Brings along
- utilsicon
- npm packages
- None
- Languages
- Texts come through props
- Studio
- Adjust in code
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Accessibility
Read from the source of the component.
- Needs no client state. The server writes it in full, so it reads without JavaScript too.
Motion
- No animations, it stands still from the start.
Source
The file aiw add puts into your project. From then on it is yours.
Show the file, 45 lines
components/ui/frame.tsx
'use client';
import { cn } from '@/lib/kit';
import { Icon } from '@/components/ui/icon';
/** A quiet browser window around a screenshot or a live component. */
export function BrowserFrame({ url, className, children }: { url?: string; className?: string; children: React.ReactNode }) {
return (
<div className={cn('overflow-hidden rounded-xl border border-border bg-card shadow-[var(--highlight),var(--shadow-lg)]', className)}>
<div className="flex h-10 items-center gap-3 border-b border-border bg-surface px-4">
<div className="flex gap-1.5" aria-hidden>
<span className="size-2.5 rounded-full bg-border-strong" />
<span className="size-2.5 rounded-full bg-border-strong" />
<span className="size-2.5 rounded-full bg-border-strong" />
</div>
{url && (
<div className="mx-auto flex h-6 min-w-0 max-w-[60%] items-center gap-1.5 rounded-md bg-muted px-3 text-[11px] text-muted-foreground">
<Icon name="lock" size={11} />
<span className="truncate">{url}</span>
</div>
)}
<span className="w-12" aria-hidden />
</div>
<div className="relative">{children}</div>
</div>
);
}
/** A phone with a rounded screen and a status bar. Width drives everything. */
export function PhoneFrame({ time = '8:30', className, children }: { time?: string; className?: string; children: React.ReactNode }) {
return (
<div className={cn('relative w-[260px] rounded-[44px] border border-border-strong bg-[color-mix(in_oklch,var(--foreground)_88%,var(--background))] p-[9px] shadow-[var(--shadow-lg)]', className)}>
<div className="relative overflow-hidden rounded-[36px] bg-background">
<div className="flex h-10 items-center justify-between px-6 text-[11px] font-semibold text-foreground">
<span>{time}</span>
<span className="absolute left-1/2 top-2 h-[22px] w-[84px] -translate-x-1/2 rounded-full bg-[color-mix(in_oklch,var(--foreground)_88%,var(--background))]" aria-hidden />
<span className="flex items-center gap-1" aria-hidden>
<span className="h-2 w-3.5 rounded-[2px] border border-current p-px"><span className="block h-full w-2/3 rounded-[1px] bg-current" /></span>
</span>
</div>
{children}
</div>
</div>
);
}Frequent questions
How do I install Browser and phone frame?
With aiw add @ai-website/frame. The command puts components/ui/frame.tsx into your project, the code is yours from then on. It brings along icon. It needs no further npm packages.
Which variants does Browser and phone frame have?
4 variants, Browser window, Phone, Desk and phone and Live component in a window.
Can an AI assistant build with Browser and phone frame?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Browser and phone frame with aiw_components and install it with aiw_add @ai-website/frame.