StellarUI

<stellar-browser-frame>

Browser-like chrome wrapper for screenshots, embeds, and app previews, following the component's address-bar and platform treatment.

Properties

Component

Example

Preview

Ship polished docs previews

Use browser-frame when you need app chrome around screenshots, embeds, or live examples.

Open preview

Markup

Copy

<stellar-browser-frame
  label="stellarui.dev"
  href="https://stellarui.dev"
>
  <stellar-icon slot="icon" name="mdi:earth"></stellar-icon>
  <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80" alt="" />
</stellar-browser-frame>

API

Complete props, events, slots, and implementation notes for the shipped browser-frame surface.

Props

Prop	Type	Default
`label`	`string`	`''`
`href`	`string`	`''`
`target`	`'' \| _blank \| _parent \| _self \| _top`	`''`
`rel`	`string`	`''`
`download`	`string`	`''`
`flush`	`boolean`	`false`
`platform`	`auto \| mac \| windows`	`auto`

Events

Event	Source	Notes
native link events	address bar	When `href` is set, the address bar remains a normal anchor element.
custom events	none	`stellar-browser-frame` is presentational chrome and emits no custom events.

Slots

Slot	Notes
default	Browser body content such as screenshots, embeds, or composed app previews.
`icon`	Optional leading address-bar icon, usually a favicon-style image or `stellar-icon`.

Notes

The public tag is `stellar-browser-frame`, a compositional wrapper that renders browser chrome around authored content.
The address bar stays intentionally small: optional icon slot, derived hostname, and normal anchor behavior when `href` is present.
`platform="auto"` mirrors the component's contract and switches to Windows chrome only on Windows user agents.
`flush` removes the body padding so screenshots, video, or iframe content can reach the frame edges.
The component is presentational chrome only. Author the actual preview content in the default slot.