Panels · Components
Taskbar
A thin command bar: one entry per open window, with slots either side.
Click my task to minimize me.
notes
Arrow keys move the window, Alt with arrows resizes it, Shift takes bigger steps. Control with left or right tiles it on that side, with up maximizes, with down returns it to floating or minimizes. While dragging, drop at a screen edge to tile, or hold Shift to split the window underneath.Tasks keep their order when focus changes.
$ pnpm dlx shadcn@latest add @nynxz/taskbarUsage
<Taskbar start={<Launcher />} center={<Clock />} end={<ThemeMenu />} />Open windows sit on the right in the order they opened, each with a dot: filled for the active window, hollow when minimized. Clicking a task restores and focuses its window (moving keyboard focus into it), or minimizes it if it's already active.
The task list is a single tab stop; the arrow keys, Home and End move within it.
Props
| Prop | Type | |
|---|---|---|
start | ReactNode | left: a logo, a launcher |
center | ReactNode | centre: a clock, a workspace switcher |
end | ReactNode | right, after the tasks: search, settings |
tasks | boolean | list open windows (default true) |
label | string | accessible name (default "Taskbar") |
The taskbar only needs to be inside the same WindowManager store as the windows it lists, not next to them: this site's taskbar is outside the sliding workspaces, over the active workspace's store.
Without a taskbar
Not every app wants one. With a few fixed panels and no windows to switch between, tasks={false} turns the bar into a plain header, and label names it for that. The ComfyUI Node Security Checker works this way.
Without a task list, nothing can bring back a minimized window, so turn minimize off for those apps (see Window features). A panel that can close should come back some other way, such as the action that fills it calling launch.