Geist Design System

Browser

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

Composition
vercel.com

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.