Browser Frame

Installation

pnpm dlx @glinui/cli@latest add browser-frame

Credits. Adapted from Magic UI (MIT, (c) Magic UI). Generic CSS chrome instead of a monolithic SVG, children slot, token colors, glass, RTL, real address text and no bundled media. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/tokens

Usage

Improvements: generic CSS chrome drawn with tokens instead of one SVG, a children slot for real UI (the original only took image or video), real address text, glass, simple mode and no bundled media.

import { Bell, Stack } from "@phosphor-icons/react"
import { BrowserFrame, IconFrame } from "@glinui/ui"
export function Demo() {

import { Bell, Stack } from "@phosphor-icons/react"
import { BrowserFrame, IconFrame } from "@glinui/ui"


export function Demo() {
  return (
    <div className="grid w-full max-w-3xl gap-4 md:grid-cols-2">
      <BrowserFrame mode="simple" title="Release notes">
        <div className="flex items-center gap-3 p-5 text-sm">
          <IconFrame tone="success"><Stack aria-hidden className="size-4" /></IconFrame>
          Version 2.8 is live for all workspaces.
        </div>
      </BrowserFrame>
      <BrowserFrame url="glinui.com/docs">
        <div className="flex items-center gap-3 p-5 text-sm">
          <IconFrame tone="accent"><Bell aria-hidden className="size-4" /></IconFrame>
          Subscribe to product updates.
        </div>
      </BrowserFrame>
    </div>
  )
}

Accessibility

• The traffic-light dots are decorative and aria-hidden.
• The address is a real text element, and children keep their own semantics and focus order.
• The frame is a labelled group and does not use role=img, so inner content stays reachable.

Reduced Motion

Static chrome with no animation.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { BrowserFrame } from "@glinui/ui"