'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Overlays
DockedWindow
A window docked at the bottom of the screen that stays open while people keep working: a message being written, uploads in progress, a chat. It minimizes to its bar, grows to most of the screen, and several sit side by side.
import { DockedWindow, DockedWindowStack } from '@alea/ui';
Examples
Compose and uploads
Two docked windows side by side: a message being written (minimize it with the bar, grow it to most of the screen) and uploads in progress with their count in the bar. In an app the stack is fixed to the bottom of the screen; here it sits in the preview.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-surface…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-regular…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-modal…
Props
DockedWindow props
A window docked at the bottom of the screen that people keep open while they work: a message being written, uploads in progress, a chat. It minimizes to its bar, can grow to most of the screen, and several sit side by side in a DockedWindowStack. Not modal: the page stays usable.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The content: a form (compose a message), a list (uploads), a chat. |
titlerequired | ReactNode | - | The title in the bar; it names the window. |
allowMaximize | boolean | - | Shows a button that grows it to most of the screen. |
className | string | - | Extra class names. |
defaultMinimized | boolean | false | Minimized at first. |
footer | ReactNode | - | Content pinned at the bottom: Send, Discard. |
height | number | 420 | Height of the content when open, in px. Default 420. |
isMinimized | boolean | - | Minimized to its title bar (controlled). |
meta | ReactNode | - | Something next to the title: a count, a status. |
onClose | (() => void) | - | Shows a close button and calls this. |
onMinimizedChange | ((minimized: boolean) => void) | - | Called when it is minimized or restored. |
width | number | 480 | Width when docked, in px. Default 480. |
DockedWindowStack props
Holds docked windows side by side along the bottom of the screen; on phones they stack full width.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | DockedWindow elements, newest last. |
className | string | - | Extra class names. |
placement | "start" | "end" | 'end' | Where the stack sits: end (default) or start. |
position | "fixed" | "inline" | 'fixed' | fixed to the viewport (default) or inline, for demos and previews. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
DockedWindow
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-dock-win.alea-dock-bar.alea-dock-title.alea-dock-title-text.alea-dock-meta.alea-dock-tools.alea-dock-content.alea-dock-body.alea-dock-footer- Data attributes
data-minimizeddata-maximized
DockedWindowStack
- Variants
placementstartendpositionfixedinline- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-dock-stack- Data attributes
data-position=fixeddata-placement=enddata-placement=startdata-position=inline
Accessibility
- A non-modal dialog named by its title: the page stays usable, and focus is never trapped.
- The title bar is a button that minimizes and restores the window, with aria-expanded.
- Minimize, maximize and close are named buttons; Escape leaves the full size view.
- Minimized content is hidden from screen readers too, not only visually.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the bar buttons and the content |
| Enter or Space (on the title) | Minimizes or restores |
| Escape | Leaves the full size view |
Do and don't
Do
- Use it for work that runs alongside the page (writing, uploading, chatting).
- Show progress or a count in meta while it is minimized.
- Keep at most three windows open; on phones they stack full width.
Don't
- Don't use it for a decision people must make now: that is a Modal or an AlertDialog.
- Don't lose what was written when it closes: ask, or keep a draft.
In Figma
DockedWindow with State (Open, Minimized, Maximized), a title, meta and footer slots.