> ## Documentation Index
> Fetch the complete documentation index at: https://docs.equa.cc/llms.txt
> Use this file to discover all available pages before exploring further.
# EquaCommandCenter
> Design system reference for EquaCommandCenter, including Storybook, Figma, screenshots, and usage guidance
# EquaCommandCenter
> **Last Verified:** 2026-05-20 | **Storybook source:** `equa-patternlib-nextjs/stories/EquaCommandCenter.stories.tsx`, Line: 27
## Purpose
Full command-center shell reference for gateway-aligned operations UI.
## Storybook
| Story | Reference |
| ------------------------------- | --------------------------------------------------------------------------------------------------- |
| Full Screen Default | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--full-screen-default) |
| Left Sidebar Expanded | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--left-sidebar-expanded) |
| Left Sidebar Collapsed | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--left-sidebar-collapsed) |
| Priority Stack Expanded | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--priority-stack-expanded) |
| Priority Stack Collapsed | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--priority-stack-collapsed) |
| Task Thread Granular Components | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--task-thread-granular-components) |
| Priority Granular Components | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--priority-granular-components) |
| Status Update Popup | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--status-update-popup) |
| Status Update Workflow | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--status-update-workflow) |
| Loading State | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--loading-state) |
| Empty State | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--empty-state) |
| Blocked State | [Storybook](http://localhost:6006/?path=/story/equa-commandcenter--blocked-state) |
## API And Props
| Prop or Control | Source | Notes |
| --------------- | --------------------------------- | ------------------------------------- |
| UNVERIFIED | Not exposed in Storybook argTypes | Review component TypeScript interface |
Sources:
* `equa-patternlib-nextjs/src/components/commandcenter/commandcenter.tsx`, Line: 33
* `equa-patternlib-nextjs/src/components/commandcenter/index.ts`
* `equa-patternlib-nextjs/stories/EquaCommandCenter.stories.tsx`, Line: 27
## Figma
[Open Figma reference](https://www.figma.com/design/Dp3LmaW5KsM2C0YDU4Lzs3/Command-Center---SO?node-id=1-2)
## Screenshots
| State | Asset |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Equa dark theme | 
|
| Light theme | 
|
## Usage Notes
* Prefer this component over local one-off UI for matching product states.
* Keep new variants represented in Storybook before adding docs references here.
* Use token-backed colors, spacing, radius, and shadows from [Foundations](/architecture/design-system/foundations).
## Accessibility Notes
* Preserve keyboard and focus behavior from the source component.
* Any icon-only controls must provide an accessible label in consuming product code.
* Validate color contrast in both Equa dark and light theme screenshots before release.