Window Frame · Tinyrack Design System

Contract

Axis	Values	Default
`variant`	`macos`, `browser`	`macos`
`padding` (Body)	`none`, `sm`, `md`, `lg`	`md`
parts	`Root`, `TitleBar`, `Controls`, `Control`, `Title`, `AddressBar`, `Body`	compound API

Install

pnpm add @tinyrack/ui

Scroll inside the code area to read long lines.

Styles

@import '@tinyrack/ui/components/window-frame.css';

Scroll inside the code area to read long lines.

Imports

import { TRWindowFrame } from '@tinyrack/ui/components/window-frame';

Scroll inside the code area to read long lines.

Playground

zsh — tinyrack

❯ npx @tinyrack/cli init
✓ Created tinyrack.config.ts
✓ Linked 3 dotfiles

Usage

Terminal window permalink

The signature look: macOS chrome around a dark terminal. Controls auto-render the three traffic-light dots, and the body goes dark through the --tr-window-frame-body-* custom properties so the framing and the content match.

zsh — tinyrack

❯ npx @tinyrack/cli init
✓ Created tinyrack.config.ts
✓ Linked 3 dotfiles

Examples

macOS and browser chrome permalink

Use variant macos for a titled app window and browser for a web mockup with an address bar that fills the title bar. Both wrap real UI, not just terminals.

Settings

AppearanceSystem theme · Sync enabled

https://dotweave.tinyrack.net/en/

Your dotfiles, versionedTrack, sync, and roll back your shell config across every machine.

Custom theme permalink

Everything themes through custom properties. Recolor the traffic-light dots with --tr-window-frame-control-* and paint any palette with the --tr-window-frame-body-* properties — no extra variant needed.

tokyonight

❯ dotweave status
● 3 tracked · 0 drifted

API

Part	Base element	Key props
`TRWindowFrame.Root`	`div`	`variant`, `render`
`TRWindowFrame.TitleBar`	`div`	native div props
`TRWindowFrame.Controls`	`div`	auto-renders three dots, `aria-hidden` by default
`TRWindowFrame.Control`	`div`	`tone` (`close`, `minimize`, `maximize`)
`TRWindowFrame.Title`	`span`	`render` for heading semantics
`TRWindowFrame.AddressBar`	`div`	native div props
`TRWindowFrame.Body`	`div`	`padding` (`none`, `sm`, `md`, `lg`)

TRWindowFrame.Root and TRWindowFrame.Title support Base UI's additive render contract, so the frame can become an <article> or <figure> and the title can opt into a heading. The traffic-light dots are decorative — Controls sets aria-hidden and renders non-interactive elements. The body inherits the theme; restyle it into a dark terminal with the --tr-window-frame-body-background, --tr-window-frame-body-color, and --tr-window-frame-body-font custom properties, and recolor the dots with --tr-window-frame-control-close, --tr-window-frame-control-minimize, and --tr-window-frame-control-maximize.