# components/PreviewWindow (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/PreviewWindow.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/PreviewWindow.tsx).

## Components

### `PreviewWindow`

Component.

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

```ts
function PreviewWindow(props: PreviewWindowProps): Element
```

**Parameters**

- `props` (`PreviewWindowProps`): Component props.

**Returns** `Element`

**Props**

- `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.

Source: [ui/src/components/PreviewWindow.tsx:36](https://github.com/Tahul/zidane/blob/main/ui/src/components/PreviewWindow.tsx#L36)

## Interfaces

### `PreviewWindowProps`

Interface.

Props for [`PreviewWindow`](https://zidane.si/docs/reference/ui-components-preview-window.md#PreviewWindow).

```ts
interface PreviewWindowProps
```

**Properties**

- `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.

Source: [ui/src/components/PreviewWindow.tsx:10](https://github.com/Tahul/zidane/blob/main/ui/src/components/PreviewWindow.tsx#L10)