Browser- und Telefonrahmen
Browserfenster und Telefonrahmen für Bildschirmfotos und echte, bedienbare Components.
Variants
Details
Was Browser- und Telefonrahmen mitbringt, aus Registry und Quellcode gelesen.
- Kategorie
- Media
- Bereich
- Elements
- Variants
- 4
- Version
- 1.1.0 · seit 1.0.0
- Datei
- components/ui/frame.tsx
- Bringt mit
- utilsicon
- npm-Pakete
- Keine
- Sprachen
- Texte kommen über Props
- Studio
- Im Code anpassen
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Kommt ohne Client-State aus. Der Server schreibt sie vollständig, sie ist auch ohne JavaScript lesbar.
Bewegung
- Ohne Animationen, sie steht sofort ruhig da.
Quellcode
Die Datei, die aiw add in dein Projekt legt. Sie gehört danach dir.
Datei anzeigen, 45 Zeilen
'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>
);
}Häufige Fragen
Wie installiere ich Browser- und Telefonrahmen?
Mit aiw add @ai-website/frame. Der Befehl legt die Datei components/ui/frame.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Browser- und Telefonrahmen?
4 Varianten, Browserfenster, Telefon, Schreibtisch und Telefon und Echte Component im Fenster.
Kann ein KI-Assistent Browser- und Telefonrahmen einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Browser- und Telefonrahmen mit aiw_components und installieren sie mit aiw_add @ai-website/frame.