Components
The Whisker component library ships 20+ shared retail UI components with a Nike theme and built-in DevTools. Every component below documents its props and usage examples, with a live, interactive preview rendered right on the page. Looking for a context/data provider (store info, analytics, translations) instead? See Providers.
| Component | Description |
|---|---|
| AccentCard | Bordered card with a configurable left accent stripe; supports accordion and button interaction modes. |
| AutoComplete | MUI/Podium-styled autocomplete for single-select search with async or static options. |
| BadgeBar | Horizontal KPI badge bar with up/down/flat trend indicators. |
| Billboard | Large KPI metric card with optional delta and supporting value row. |
| ClassificationTags | Compact division/gender/category tag group for product classification display. |
| ClickToCopy | Inline text control that copies a value to the clipboard on click with feedback. |
| CreateIncidentDrawer | Slide-out drawer form for creating ServiceNow store incidents via BFF. |
| DataTable | Sortable, filterable, paginated data table built on TanStack Table with mobile card view and built-in column types. |
| DateRangePicker | Locale-aware date range picker with shortcuts, built on MUI X Date Pickers and Podium styling. |
| DevTools | Floating developer tools panel: React Query inspector, Zustand state, XRay sessions, inventory search. |
| FileUpload | Drag-and-drop file upload with constraints, rejection reasons, and per-file status. |
| IncidentsWidget | Widget listing open ServiceNow incidents for the current store. |
| LanguageSelect | Locale picker wired to TranslationProvider; switches CDN translation bundle. |
| NoImagePlaceholder | Division-specific SVG placeholders when product images are missing (Apparel, Footwear, Equipment). |
| PicklistCart | Shopping-cart-style picklist builder that integrates with DataTable row selection. |
| ProductSlideOut | Product inquiry slide-out panel with sizes, inventory, and imagery. |
| PushAsideWithDrawer | Push-aside layout with persistent Podium drawer panel; main content reflows when open. |
| ScreenCaptureUpload | Capture or upload screenshots with preview and upload callback. |
| SegmentedQuantity | SOH display segmented into Sales Floor, Back of House, and optional Offsite quantities. |
| SimpleHorizontalBarChart | Nike-styled horizontal bar chart for categorical comparisons. |
| StatusBadge | Compact status pill using Podium color tokens with optional icon. |
| StoreCountrySelector | Country and store number selector with single or multi-store modes; backed by Zustand. |
| Tag | Generic removable or static tag for labels and filters. |
| WidgetShell | Standard widget container with consistent padding and border for dashboard tiles. |