# Window Frame

> A browser-like frame around a screen or block, so it reads as an app and not as part of the page: three dots, the address and an optional tag over the content.

Source: https://ritla.app/ui/window-frame

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add window-frame
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/window-frame
```

## Usage

```tsx
import { WindowFrame } from "@/components/ui/window-frame";

<WindowFrame url="ritla.app/blocks/dashboard-shell" label="Sample data">
  <DashboardShell … />
</WindowFrame>
```

## Examples

### An Arabic screen inside

The bar is browser chrome, so it keeps one layout in every language: the dots on the left, the address left to right. The content below takes the page's direction or its own, so an Arabic screen reads from the right.

Live preview: https://ritla.app/_kanz/preview/ltr/window-frame-arabic-inside

## API reference

### `WindowFrame`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | None | What the window shows: a screen, a block or a screenshot. |
| `url` | `string` | None | The address in the bar, always read left to right. |
| `label` | `ReactNode` | None | A short tag at the bar's end, such as “Sample data”. |
| `shadow` | `"page" \| "band" \| "none"` | `"page"` | A hard shadow under the window, toward the line's end: on the page, a step darker on a sky band, or none. |
| `…` | `ComponentProps<"div">` | None | `div` props, such as `aria-label`. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: The frame takes no focus; Tab reaches only what is inside it.

ARIA:

- The three dots are decorative and hidden from screen readers.
- The address and the tag are plain text, read as written; add `aria-label` if the window needs a name.

## Arabic and RTL notes

Mirrors:

- The content inside follows the page's direction or its own.
- The hard shadow falls toward the line's end, so bottom-left in Arabic.

Does not mirror:

- The bar: dots on the left and the address left to right in every language, like browser chrome.
- The tag at the bar's end; its text takes its direction from its words (`dir="auto"`).

Numerals: The frame writes no numbers itself; the content follows the numerals setting.

Arabic typography: The address is `body-12` monospace; the tag is `label-12` Medium.

Mixed-direction text: The bar is `dir="ltr"` and the tag `dir="auto"`, so an Arabic tag such as «بيانات تجريبية» stays whole inside the bar.