<PageLayout maxWidth="xl" padding="default">
  <PageHeader title="Projects" />
  {/* page content */}
</PageLayout>

<PageHeader
  title="Expense Reports"
  description="Track and manage project expenditures"
  icon={Receipt}
  actions={<Button onClick={handleAdd}>New Expense</Button>}
/>

const [activeTab, setActiveTab] = useState('overview');

<PageTabs
  ariaLabel="Overview sections"
  tabs={[
    { title: 'Overview', value: 'overview', icon: LayoutDashboard },
    { title: 'Settings', value: 'settings', icon: Settings },
  ]}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  idBase="overview-tabs"
/>

<div
  id={`overview-tabs-panel-${activeTab}`}
  role="tabpanel"
  aria-labelledby={`overview-tabs-tab-${activeTab}`}
  tabIndex={0}
>
  {activeTab === 'overview' && <OverviewContent />}
  {activeTab === 'settings' && <SettingsContent />}
</div>

<div className="flex gap-6">
  <SecondarySidebar
    items={[
      { id: 'general', label: 'General', icon: Settings },
      { id: 'billing', label: 'Billing', icon: CreditCard },
    ]}
    activeId={activeSection}
    onSelect={setActiveSection}
    searchable
  />
  <div className="flex-1">{/* section content */}</div>
</div>

import { StatusBadge, mapDomainStatus } from '@/components/ui/StatusBadge';

// Direct usage
<StatusBadge status="success" label="Approved" />

// Domain mapping
<StatusBadge status={mapDomainStatus('draft')} label="Draft" dot />

<ConfidenceBadge confidence={92} />
<ConfidenceBadge confidence={45} size="sm" />

<CitationList
  citations={ragResult.citations}
  title="Sources"
  compact
  onDocumentClick={(id, page) => openDocViewer(id, page)}
/>

<Modal isOpen={showModal} onClose={() => setShowModal(false)} title="Confirm Action" size="md">
  <p>Are you sure?</p>
  <Modal.Footer>
    <Button variant="outline" onClick={() => setShowModal(false)}>Cancel</Button>
    <Button onClick={handleConfirm}>Confirm</Button>
  </Modal.Footer>
</Modal>

<BottomSheet isOpen={open} onClose={() => setOpen(false)} snapPoints={[40, 90]}>
  <div className="p-4">Sheet content</div>
</BottomSheet>

<Tooltip content="Save changes" side="top" shortcut="Ctrl+S">
  <Button>Save</Button>
</Tooltip>

<WarningBanner
  type="warning"
  title="Budget Alert"
  message="Project spending has reached 80% of the allocated budget."
  details={['Marketing: $4,200 over', 'Travel: approaching limit']}
  dismissible
  onDismiss={() => setDismissed(true)}
/>

<FloatingActionButton onClick={handleAdd} icon={Plus} label="New Expense" hideOnScroll />

<DataStateWrapper
  loading={isLoading}
  error={error}
  isEmpty={items.length === 0}
  onRetry={refetch}
  emptyState={{ icon: Inbox, title: 'No items', description: 'Get started by adding one.' }}
  skeleton={<SkeletonTable rows={5} cols={4} />}
>
  <ItemList items={items} />
</DataStateWrapper>

<EmptyState
  icon={FolderOpen}
  title="No projects yet"
  description="Create your first project to get started."
  illustrationType="getting-started"
  actions={[
    { label: 'Create Project', onClick: handleCreate, variant: 'default' },
    { label: 'Import', onClick: handleImport, variant: 'outline' },
  ]}
  suggestions={[
    { label: 'View templates', onClick: openTemplates },
  ]}
/>

<ErrorBoundary context="User Profile Form" onReset={handleReset}>
  <UserProfileForm />
</ErrorBoundary>

<FormSection title="Basic Information" description="Required fields for project setup">
  <FormField label="Name" required error={errors.name}>
    <Input {...register('name')} />
  </FormField>
</FormSection>

<FormField label="Email" required error={errors.email} hint="We'll never share your email">
  <Input type="email" {...register('email')} />
</FormField>

<FormActions align="right">
  <Button variant="outline" onClick={handleCancel}>Cancel</Button>
  <Button type="submit" isLoading={isSubmitting}>Save</Button>
</FormActions>

<SearchFilterBar
  searchValue={searchTerm}
  onSearchChange={setSearchTerm}
  searchPlaceholder="Search projects..."
  debounceMs={300}
  filters={<Select value={status} onValueChange={setStatus}>...</Select>}
  actions={<Button onClick={handleAdd}><Plus className="w-4 h-4 mr-2" />Add</Button>}
/>

<VirtualList
  items={filteredItems}
  height={600}
  estimateSize={() => 64}
  renderItem={(item, index) => <ItemRow key={item.id} item={item} />}
  gap={8}
  loading={isLoading}
  renderSkeleton={() => <SkeletonRow />}
  loadingItemCount={10}
/>

<StaggeredList direction="up" staggerDelay={0.05}>
  {items.map(item => (
    <StaggeredItem key={item.id}>
      <ItemCard item={item} />
    </StaggeredItem>
  ))}
</StaggeredList>

<Breadcrumbs />  // no props required — reads from useLocation()

<BackButton />
<BackButton label="Back to Projects" />

import { CardVariants } from '@/components/ui/CardVariants';

<div className={CardVariants.default}>...</div>
<div className={CardVariants.elevated}>...</div>
<div className={CardVariants.flat}>...</div>

<MetricCard
  label="Active Projects"
  value={12}
  icon={FolderOpen}
  tone="info"
  trend={{ direction: 'up', value: '3 this month' }}
/>

<AnimatedIcon icon={CheckCircle} animation="bounce" size="lg" tone="success" />

<CanonicalFreshnessBadge
  freshness={projection.freshness}
  staleActionLabel="Refresh"
  onStaleAction={handleRefresh}
/>

<CanonicalProjectionHealthPanel health={canonicalHealth} />

<AsyncBoundary
  fallback={<SkeletonLoader rows={3} />}
  errorFallback={<p>Failed to load.</p>}
>
  <LazyComponent />
</AsyncBoundary>

// In routeConfig.tsx:
{ path: '/projects', element: <Projects />, errorElement: <RouteErrorBoundary /> }

<Router>
  <ScrollToTop />
  <Routes>...</Routes>
</Router>

<LoadingScreen message="Loading projects…" />

<KeyboardShortcutsModal open={open} onOpenChange={setOpen} />

<PremiumTabs
  tabs={[
    { label: 'Overview', value: 'overview' },
    { label: 'Intelligence', value: 'intelligence', requiredTier: 'Professional' },
  ]}
  value={activeTab}
  onValueChange={setActiveTab}
/>