Premium & Brand

Frame

Browser/window chrome that frames a screenshot or product mockup.

Import

tsx

import { Frame } from "@cooud-ui/ui";

bash

npx cooud-ui add frame

Examples

Browser chrome

Wrap a screenshot or mockup in browser chrome — traffic-light dots plus an address bar fed by `url`. Anything you nest becomes the framed content.

cooud.app/dashboard

Faturamento

R$ 128.940 nos últimos 30 dias.

+18% vs. o período anterior.

tsx

<Frame url="cooud.app/dashboard">
  <div className="space-y-2 p-6">
    <h3 className="font-display text-lg font-semibold text-fg">Faturamento</h3>
    <p className="text-sm text-fg-secondary">R$ 128.940 nos últimos 30 dias.</p>
    <p className="text-sm text-fg-secondary">+18% vs. o período anterior.</p>
  </div>
</Frame>

Window chrome

The `window` variant drops the address bar for a plain title bar — handy for desktop-app mockups.

Preferências

Tema, notificações e atalhos.

tsx

<Frame variant="window">
  <div className="space-y-2 p-6">
    <h3 className="font-display text-lg font-semibold text-fg">Preferências</h3>
    <p className="text-sm text-fg-secondary">Tema, notificações e atalhos.</p>
  </div>
</Frame>

API Reference

Generated from the component's exported types.

FrameProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof frameVariants>

Prop	Type	Default	Description
`variant`	`"browser" \| "window"`	`"browser"`	Chrome style. `browser` shows an address bar; `window` is a plain title bar.
`url`	`string`	—	URL shown in the address bar (browser variant only).