UI kit reference

components/PreviewWindow

Components#

Renders a window frame around a preview, themed by vars when given.

TypeScript

function PreviewWindow(props: PreviewWindowProps): Element

Parameters
Name	Type	Description
props	`PreviewWindowProps`	Component props.

Element

PreviewWindow props
Name	Type	Description
appearance?	`'dark' \| 'light'`	Light or dark, for `vars` from a palette of that appearance.
children	`ReactNode`	The preview.
className?	`string`	Extra classes on the window.
label?	`string`	Accessible name of the preview.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`ReactNode`	Caption in the title bar.
vars?	`Readonly<Record<string, string>>`	A theme's CSS variables, the full set the app applies: `themeCssVars(id)`, or `paletteToCssVars` with `contrastToCssVars` and `depthToCssVars`. Palette vars alone leave text on the page's contrast. Absent: the page's theme.

TypeScript

interface PreviewWindowProps

PreviewWindowProps properties
Name	Type	Description
appearance?	`'dark' \| 'light'`	Light or dark, for `vars` from a palette of that appearance.
children	`ReactNode`	The preview.
className?	`string`	Extra classes on the window.
label?	`string`	Accessible name of the preview.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
title?	`ReactNode`	Caption in the title bar.
vars?	`Readonly<Record<string, string>>`	A theme's CSS variables, the full set the app applies: `themeCssVars(id)`, or `paletteToCssVars` with `contrastToCssVars` and `depthToCssVars`. Palette vars alone leave text on the page's contrast. Absent: the page's theme.