# Browser

The Browser component lets you showcase website screenshots or any other content within a realistic browser-style frame.

---

## Composition

```tsx
import { Browser } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="max-w-4xl">
      <Browser address="https://www.vercel.com">
        <div className="p-6" />
      </Browser>
    </div>
  );
}
```

## Best Practices

### When to use

* Use Browser as marketing chrome around screenshots, demos, and recordings shown on landing pages, docs, and changelog posts.
* Don’t render real product UI inside a Browser frame; the chrome implies a screenshot, not a live surface.
* Compose from the building blocks (`Dots`, `Controls`, address bar) when the canned `Browser` shape doesn’t fit the layout; don’t fork the chrome.

### Behavior

* Match the variant to the surrounding theme: `light` chrome on light backgrounds, `dark` chrome on dark, so the frame doesn’t fight the page.
* For long URLs, use Middle Truncate inside the address bar so the host and path tail both remain visible.
* Lock the inner image aspect ratio so the chrome doesn’t reflow when an image is missing or slow to load.

### Accessibility

* The browser chrome is decorative and should carry `aria-hidden="true"`; meaning lives on the inner image or video.
* Give the inner screenshot meaningful alt text describing what the user is seeing, not “browser screenshot”.
* Don’t add focusable dot controls or back/forward buttons; the chrome is a frame, and unreachable controls confuse keyboard users.