Browser Frame

A layout component that mimics the appearance of a web browser window.

Customizing

globals.css


:root {
  --ex-browser-frame-radius: var(--radius-sm);
 
  --ex-browser-frame-toolbar-px: calc(var(--spacing) * 5);
  --ex-browser-frame-toolbar-height: calc(var(--spacing) * 16);
 
  --ex-browser-frame-address-font-size: var(--text-sm);
  --ex-browser-frame-address-font-weight: var(--font-weight-normal);
 
  --ex-browser-frame-address-px: calc(var(--spacing) * 3);
  --ex-browser-frame-address-height: calc(var(--spacing) * 8);
 
  --ex-browser-frame-address-radius: 9999px;
 
  --ex-browser-frame-content-px: calc(var(--spacing) * 5);
  --ex-browser-frame-content-py: calc(var(--spacing) * 5);
}

API

Browser Frame

Element	Selector
`BrowserFrame`	`.ex-browser-frame`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`BrowserFrame.Toolbar`	`.ex-browser-frame-toolbar`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`

Browser Frame Controls

Element	Selector
`BrowserFrame.Controls`	`.ex-browser-frame-controls`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`

Browser Frame Actions

Element	Selector
`BrowserFrame.Actions`	`.ex-browser-frame-actions`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`

Browser Frame Address

Element	Selector
`BrowserFrame.Address`	`.ex-browser-frame-address`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`

Browser Frame Content

Element	Selector
`BrowserFrame.Content`	`.ex-browser-frame-content`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`

Browser Frame

Customizing

API

Browser Frame

Browser Frame Toolbar

Browser Frame Controls

Browser Frame Actions

Browser Frame Address

Browser Frame Content