Skip to main content

UX Standards — 14: Component Quick Reference

Purpose: Master lookup table — given any UI element, find the component, file path, and spec doc. Parent rules: See 00-OVERVIEW-AND-CSS-RULES.md first.

Layout Components​

UI ElementComponentFile PathSpec Doc
Full page shell (Orchestrate)DashboardLayoutClientorchestrate-frontend/src/app/(dashboard)/dashboard-layout-client.tsx01
Full page shell (Accelerate)DashboardLayoutmodules/fax-automation/app/web-fax-dashboard/components/dashboard-layout.tsx01
Sticky headerHeaderorchestrate-frontend/packages/shared/components/layouts/header.tsx02
App sidebar (Orchestrate)AppSidebarorchestrate-frontend/packages/shared/components/layouts/app-sidebar.tsx03
Sidebar nav groupsNavGrouporchestrate-frontend/packages/shared/components/layouts/sidebar-nav.tsx03
Sidebar user cardSidebarUserorchestrate-frontend/packages/shared/components/layouts/sidebar-user.tsx03
FooterFooterorchestrate-frontend/packages/shared/components/layouts/footer.tsx13
Page title mappageTitleMaporchestrate-frontend/packages/shared/components/layouts/page-titles.ts04
Page title overrideusePageTitleOverrideorchestrate-frontend/src/components/layouts/page-title-override-context.tsx04

Page Structure Components​

UI ElementComponentFile PathSpec Doc
Universal list page shellDocTypeListPageorchestrate-frontend/src/components/doctype-list-page.tsx01, 06, 07, 08
State-based tabsTabbedPageLayoutorchestrate-frontend/src/components/tabbed-page-layout.tsx05
Route-based tabsRouteTabbedLayoutorchestrate-frontend/src/components/route-tabbed-layout.tsx05
Stats summary cardsStatCard (inside DocTypeListPage)orchestrate-frontend/src/components/doctype-list-page.tsx06

Data Table Components​

UI ElementComponentFile PathSpec Doc
Table with sorting + DnDDataTableSortablecomponents/data-table/data-table-sortable.tsx07
Toolbar above tableDataTableToolbarcomponents/data-table/data-table-toolbar.tsx08
Column header + filter popupDataTableColumnHeadercomponents/data-table/data-table-column-header.tsx09
Column visibility/reorderDataTableColumnSelectorcomponents/data-table/data-table-column-selector.tsx09
Pagination footerDataTablePaginationcomponents/data-table/data-table-pagination.tsx07, 08
Toolbar icon buttonDataTableIconButtoncomponents/data-table/data-table-icon-button.tsx08
Advanced filter builderDataTableFilterBuildercomponents/data-table/data-table-filter-builder.tsx09
Resizable record detailResizableDialogcomponents/data-table/resizable-dialog.tsx12
UI Elementshadcn ComponentImport PathSpec Doc
Standard modalDialog@/components/ui/dialog11
Blocking confirmationAlertDialog@/components/ui/alert-dialog11
Slide-over panelSheet@/components/ui/sheet12
Dropdown menuDropdownMenu@/components/ui/dropdown-menu09
PopoverPopover@/components/ui/popover—
TooltipTooltip@/components/ui/tooltip08
Import wizardImportDialog@/components/import-dialog/import-dialog.tsx10
Persistent popupopenPersistentPopup()@/lib/popup/persistent-popup12, 13

Header Right Zone Components​

UI ElementComponentImport PathSpec Doc
Anna AI buttonAnnaButton@/components/anna/anna-button02
Command searchCommandSearchButton@/components/search/command-search-button02
Notification bellNotificationBell(built into layout)02
Help / helpdeskHelpdeskButton@/components/helpdesk/helpdesk-button02
Language selectorLanguageSelector@/components/language-selector02
Dark mode toggleThemeToggle@/components/theme-toggle02
User avatar / menuUserMenu@/components/user-menu02

Form Components (shadcn)​

UI ElementComponentImport Path
Text inputInput@/components/ui/input
TextareaTextarea@/components/ui/textarea
Select dropdownSelect@/components/ui/select
CheckboxCheckbox@/components/ui/checkbox
Radio groupRadioGroup@/components/ui/radio-group
Switch/toggleSwitch@/components/ui/switch
Form labelLabel@/components/ui/label
Form wrapperForm (RHF integration)@/components/ui/form
Date pickerCalendar + Popover@/components/ui/calendar

Display Components (shadcn)​

UI ElementComponentImport Path
Status badge / pillBadge@/components/ui/badge
Card containerCard@/components/ui/card
Separator / dividerSeparator@/components/ui/separator
User avatarAvatar@/components/ui/avatar
Loading skeletonSkeleton@/components/ui/skeleton
Alert bannerAlert@/components/ui/alert
Progress barProgress@/components/ui/progress
Tabs (inline)Tabs@/components/ui/tabs
Collapsible sectionCollapsible@/components/ui/collapsible
Hover cardHoverCard@/components/ui/hover-card

Common CSS Patterns Quick Reference​

Status Badge Pattern​

// Active / Success (green)
<Badge className="bg-primary/10 border border-primary/20 text-primary">Active</Badge>

// Inactive / Neutral (gray)
<Badge className="bg-muted border border-border text-muted-foreground">Inactive</Badge>

// Error / Failed (red)
<Badge className="bg-destructive/10 border border-destructive/20 text-destructive">Error</Badge>

// Pending (gray + pulse)
<Badge className="bg-muted border border-border text-muted-foreground animate-pulse">Pending</Badge>

Icon Button Standard (Header)​

<Button variant="ghost" size="icon" className="h-9 w-9" aria-label="Description">
  <IconName className="h-4 w-4" />
</Button>

Icon Button Standard (Toolbar)​

<Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Description">
  <IconName className="h-4 w-4" />
</Button>
// Active
"px-3 py-2 rounded-lg flex items-center gap-2 bg-primary text-primary-foreground font-medium"

// Inactive
"px-3 py-2 rounded-lg flex items-center gap-2 text-muted-foreground hover:bg-muted transition-colors"

Card Container​

<div className="rounded-lg border bg-card p-4">

Section Header Label​

<p className="px-3 text-xs font-semibold text-muted-foreground mb-2">SECTION NAME</p>

Form Field Group​

<div className="space-y-2">
  <Label htmlFor="field">Field Label</Label>
  <Input id="field" ... />
  {error && <p className="text-xs text-destructive">{error.message}</p>}
</div>

Key Measurements Quick Reference​

ElementSize
Header heighth-16 (64px)
Footer heighth-12 (48px)
Sidebar widthw-64 (256px)
Content paddingp-6 (24px)
Header icon buttonh-9 w-9 (36px)
Toolbar icon buttonh-8 w-8 (32px)
Header iconh-4 w-4 (16px)
Nav iconh-4 w-4 (16px)
Stat card iconh-5 w-5 (20px)
Empty state iconh-12 w-12 (48px)
Loading spinnerh-8 w-8 (32px)
Search inputh-8 w-48 lg:w-64
Page inputh-8 w-12
User avatarh-8 w-8 (32px)
App icon (sidebar)h-10 w-10 (40px)
Notification badgemin-w-[16px] h-4
Table row (compact)h-8 (32px)
Table row (default)h-10 (40px)
Table row (large)h-14 (56px)

Icon Reference Quick Map​

ActionIconImport
Add / CreatePluslucide-react
EditPencillucide-react
DeleteTrash2lucide-react
ViewEyelucide-react
CopyCopylucide-react
DuplicateFileslucide-react
Bulk EditSquarePenlucide-react
RefreshRefreshCwlucide-react
ImportUploadlucide-react
ExportDownloadlucide-react
FilterFilterlucide-react
Clear FilterFilterXlucide-react
SortChevronsUpDownlucide-react
Sort AscArrowUplucide-react
Sort DescArrowDownlucide-react
SearchSearchlucide-react
Close / ClearXlucide-react
More actionsMoreHorizontallucide-react
NotificationBelllucide-react
SettingsSettingslucide-react
HelpHelpCirclelucide-react
UserUserlucide-react
Mobile menuMenulucide-react
AttachmentPapercliplucide-react
Download fileFileDownlucide-react
EmailMaillucide-react
PinPinlucide-react
UnpinPinOfflucide-react
Column densityRows3lucide-react
Chevron rightChevronRightlucide-react
Chevron leftChevronLeftlucide-react
First pageChevronsLeftlucide-react
Last pageChevronsRightlucide-react
Drag handleGripVerticallucide-react
Hide columnEyeOfflucide-react

File Path Structure​

Orchestrate Frontend​

orchestrate-frontend/
├── src/
│   ├── app/
│   │   └── (dashboard)/
│   │       ├── dashboard-layout-client.tsx    ← Layout shell
│   │       └── master-data/
│   │           └── product-setup/page.tsx    ← Example page
│   ├── components/
│   │   ├── doctype-list-page.tsx             ← Universal list page shell
│   │   ├── tabbed-page-layout.tsx            ← State-based tabs
│   │   ├── route-tabbed-layout.tsx           ← Route-based tabs
│   │   └── import-dialog/
│   │       └── import-dialog.tsx             ← Import wizard
│   └── components/ui/                        ← shadcn components
└── packages/
    └── shared/
        └── components/
            └── layouts/
                ├── header.tsx                ← Sticky header
                ├── app-sidebar.tsx           ← Orchestrate sidebar
                ├── sidebar-nav.tsx           ← Nav group items
                ├── sidebar-user.tsx          ← User card
                ├── footer.tsx               ← Footer
                └── page-titles.ts           ← Title registry

Accelerate Modules​

modules/
├── fax-automation/
│   └── app/web-fax-dashboard/
│       ├── components/
│       │   └── dashboard-layout.tsx          ← Fax module layout
│       └── app/
│           └── (dashboard)/
│               └── [page]/page.tsx
└── referral-automation/
    └── web-outreach-dashboard/
        ├── components/
        │   └── data-table/                   ← All UDT components live here
        │       ├── data-table-sortable.tsx
        │       ├── data-table-toolbar.tsx
        │       ├── data-table-column-header.tsx
        │       ├── data-table-column-selector.tsx
        │       ├── data-table-pagination.tsx
        │       ├── data-table-icon-button.tsx
        │       ├── data-table-filter-builder.tsx
        │       └── summary-widgets.tsx
        └── layout.tsx

Document Index​

#FileCovers
0000-OVERVIEW-AND-CSS-RULES.mdTech stack, CSS variables, foundational rules
0101-LAYOUT-SHELL.mdPage shell, zones, spacing, mobile behavior
0202-HEADER.mdHeader: three zones, icons, page title
0303-SIDEBAR-NAVIGATION.mdSidebar: nav groups, items, collapse, user card
0404-PAGE-TITLE-AND-SUBTITLE.mdTitle/subtitle, pageTitleMap, override context
0505-TAB-NAVIGATION.mdState-based vs route-based tabs, active styles
0606-STATS-SUMMARY-CARDS.mdStat cards: layout, variants, grid rules
0707-UNIVERSAL-DATA-TABLE.mdUDT: columns, density, selection, pinning
0808-UDT-TOOLBAR.mdToolbar buttons, order, search, pagination
0909-COLUMN-FILTER-POPUP.mdColumn header dropdown: sort, filter, hide
1010-IMPORT-WIZARD-MODAL.md6-step import wizard: each step spec
1111-MODALS-AND-DIALOGS.mdDialog sizes, CTAs, form dialogs, alerts
1212-POPOUT-AND-SLIDE-OVER-WINDOWS.mdPersistent popups, Sheet slide-overs
1313-FOOTER.mdFooter spec, height, content, policy links
1414-COMPONENT-QUICK-REFERENCE.mdThis file — master lookup table