Window Frame · paneui

Northwind

Weekly report

Signups are up 12% on last week.

Installation

pnpm dlx shadcn@latest add @paneui/window-frame

Usage

import { WindowFrame, WindowFrameBar, WindowFrameBody, WindowFrameTitle } from "@/components/ui/window-frame"

<WindowFrame>
  <WindowFrameBar>
    <WindowFrameTitle>Northwind</WindowFrameTitle>
  </WindowFrameBar>
  <WindowFrameBody>…</WindowFrameBody>
</WindowFrame>

Composition

WindowFrame
├── WindowFrameBar
│   ├── WindowFrameControls (added for you)
│   ├── WindowFrameTitle
│   └── WindowFrameActions
└── WindowFrameBody

Examples

Glass

Use over pictures and tinted sections.

Centred title

Without controls

Corners

The body is inset 6px and its corner is the frame's minus that inset, so the two stay concentric at every radius preset and in the Paper style.

Decoration only

The window dots are hidden from assistive tech and do nothing. Put real controls in WindowFrameActions.

API Reference

WindowFrame

Also accepts every prop of div.

variant= "solid": "solid" | "glass"; glass is a translucent, blurred shell for use over pictures.
size= "default": "sm" | "default"; Title bar height: 32px or 36px.

Prop	Type	Default	Description
variant	"solid" \| "glass"	"solid"	`glass` is a translucent, blurred shell for use over pictures.
size	"sm" \| "default"	"default"	Title bar height: 32px or 36px.

data-variant: The variant.
data-size: The size.

Data attribute	Description
data-variant	The variant.
data-size	The size.

WindowFrameBar

Also accepts every prop of div.

controls= true: boolean; Starts the bar with the three window dots.

Prop	Type	Default	Description
controls	boolean	true	Starts the bar with the three window dots.

WindowFrameTitle

Also accepts every prop of span.

align= "start": "start" | "center"; center puts the title on a chip in the middle of the bar.

Prop	Type	Default	Description
align	"start" \| "center"	"start"	`center` puts the title on a chip in the middle of the bar.

WindowFrameActions

Pushed to the end of the bar. Also accepts every prop of span.

WindowFrameControls

The three dots, for a custom bar. Also accepts every prop of span.

WindowFrameBody

The content area. Give it a height or let its content size it. Also accepts every prop of div.