Theme Default

Components

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.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

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

npx ritla add window-frame

Also works with shadcn: npx shadcn@latest add @ritla/window-frame

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

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.

Get the code ›

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 are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

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