ManpowerHub Components
Composite components and layout blocks from the ManpowerHub v3 design system.
Install the ManpowerHub theme first, then add any component via the CLI:
npx shadcn@latest add @woxcn/manpowerhub-kpiLayout blocks
Section titled “Layout blocks”| Block | Description |
|---|---|
| App Shell | Main content area with scroll body |
| Sidebar | Navigation sidebar |
| Topbar | Page top bar |
| Dashboard | Full dashboard example |
Data display
Section titled “Data display”| Component | Description |
|---|---|
| KPI Card | Metric cards with trends |
| Agent Card | AI agent status cards |
| Feed | Activity feed |
| Timeline | Activity timeline |
| Detail Panel | Profile / worker detail |
| Data Table | Table primitives |
| Stat Row | Label/value rows |
| Empty State | Empty placeholders |
Forms & chrome
Section titled “Forms & chrome”| Component | Description |
|---|---|
| Field | Form field wrapper |
| Filter Bar | Search and filters |
| File Upload | Document dropzone |
| Page Header | Page titles |
| Section Header | Section titles |
| Modal | Dialog modal |
| Status Toast | Inline toasts |
| Progress | Progress bars |
| Avatar | Initials avatars |
These map to patterns in the ManpowerHub v3 HTML prototype. Shell CSS in the MFE (services/microfrontend/manpower) remains separate—use these in feature apps under apps/manpower/*.