Desktop app layout
The frame of the desktop app: a title bar, an activity bar, a status bar and a dock for a side panel such as the agent chat. Pick Dock for a panel that sits beside any view and can be resized or closed.
- Titlebar
- Dock
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Desktop app layout
Dark theme, Desktop app layout
High contrast theme, Desktop app layout
UsageLink to the section Usage
import { Titlebar, Dock } from '@skribly/ui/shell'<AppLayout skipLinkLabel="Skip to content" titlebar={<Titlebar brand={…} actions={…} />}
activityBar={<ActivityBar label="Views">…</ActivityBar>} statusBar={<StatusBar label="Status">…</StatusBar>}>
<MainContent>…</MainContent>
<Dock label="Agent panel" closeLabel="Close" onClose={close} resizeLabel="Resize the agent panel">…</Dock>
</AppLayout>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The title bar is the banner and the dock a named complementary landmark with a level 2 heading.
- Its grip is a focusable separator: arrow keys resize by 16px, Home and End go to the limits, Enter collapses and restores.
- Below 48rem the dock opens as a modal sheet that closes on Escape.
This demo runs through axe in all three themes on every test run. See what the tests check.