App windowPro
A generic desktop app window with a unified title bar, refined gray controls, an inset sidebar panel and an inactive state.
On this page
ProA desktop app window with the thread sidebar running the full height under the controls.
Installation
Usage
import { AppWindow } from "@/components/ui/chatcn/pro/app-window"
<AppWindow title="Agent console" sidebar={<Threads />} height={520}>
<YourChat />
</AppWindow>Examples
States
ProInactive, glyph controls as buttons, a long title, and an empty window with no controls.
Props
| Prop | Type | Notes |
|---|---|---|
title | ReactNode | Start of the toolbar with a sidebar, centered without. Truncated |
sidebar | ReactNode | An inset full height panel, under the window controls |
sidebarWidth | number | Default 232 |
toolbar | ReactNode | End of the title bar |
controls | "dots" | "glyphs" | "none" | Default dots, always gray |
onMinimize, onMaximize, onClose | () => void | Make the glyphs real buttons |
inactive | boolean | A background window |
width, height | number | string | Default 100% and 480 |
WindowControls
The controls are exported on their own as WindowControls for custom chrome. Colored traffic lights are not offered.
Keyboard
Glyph controls with handlers are buttons in the tab order. Dots are decorative.
Accessibility
- Glyph buttons are labeled Minimize, Maximize and Close. Without handlers they are hidden from assistive technology.
- The inactive state fades by gray step, never below readable contrast for the title.
Motion
- Glyph buttons press to 0.94 for 100 ms. Nothing else moves.