Components
Templates

Templates

Page templates are the primary speed multiplier for platform teams. Each template provides a complete page scaffold following ADR-0003 conventions.

Status: Stable

Template API (ADR-0003)

All templates accept standardized props:

PropTypeDescription
dataTDataPrimary content/entity
actionsTemplateAction[]Primary/secondary CTAs
filtersTemplateFiltersList and search controls
auditTemplateAuditProvenance and trail surfaces
layoutTemplateLayoutOverridesOptional layout overrides

Available Templates

Storybook

  • Story: GTCX/Templates/DashboardTemplate
  • Story: GTCX/Templates/ListTemplate
  • Story: GTCX/Templates/DetailTemplate
  • Story: GTCX/Templates/AuthShell
  • Story: GTCX/Templates/ErrorPageTemplate

DashboardTemplate

KPI cards and panel grid for metrics dashboards.

import { DashboardTemplate } from '@gtcx/templates';
 
<DashboardTemplate
  title="Dashboard"
  data={{
    kpis: [
      { key: 'revenue', label: 'Revenue', value: '$124K', trend: 'up', delta: '+12%' },
    ],
    panels: [
      { key: 'chart', title: 'Metrics', content: <YourChart /> },
    ],
  }}
/>

ListTemplate

Table with filters, bulk actions, and export capabilities.

import { ListTemplate } from '@gtcx/templates';
 
<ListTemplate
  title="Orders"
  data={{ items: orders, loading: false }}
  table={{
    rowKey: 'id',
    columns: [...],
  }}
  selection={{
    enabled: true,
    bulkActions: [{ key: 'export', label: 'Export', onAction: handleExport }],
  }}
  exports={[{ key: 'csv', label: 'Export CSV', onExport: handleCsv }]}
/>

DetailTemplate

Entity detail view with summary, sections, and audit trail.

import { DetailTemplate } from '@gtcx/templates';
 
<DetailTemplate
  title="Application #123"
  data={{
    summary: { items: [...], columns: 3 },
    sections: [{ key: 'info', title: 'Details', content: <Content /> }],
    auditTrail: { events: [...] },
  }}
  actions={[{ key: 'approve', label: 'Approve', kind: 'primary' }]}
/>

AuthShell

Centered card layout for authentication flows.

import { AuthShell } from '@gtcx/templates';
 
<AuthShell
  title="Sign In"
  subtitle="Welcome back"
  brand={<Logo />}
>
  <LoginForm />
</AuthShell>

ErrorPageTemplate

Standard error pages for 401, 403, 404, and 500 status codes.

import { ErrorPageTemplate } from '@gtcx/templates';
 
<ErrorPageTemplate
  status={404}
  actions={[{ key: 'home', label: 'Go Home', kind: 'primary' }]}
/>

Building Custom Templates

To create a custom template:

  1. Extend TemplateProps or compose with TemplateFrame
  2. Accept the standard props (data, actions, filters, audit, layout)
  3. Use Ant Design theme tokens for all styling
  4. Follow ADR-0002 (no deep CSS overrides)
import { TemplateFrame, type TemplateProps, type BreadcrumbItem } from '@gtcx/templates';
 
interface MyTemplateData {
  items: Item[];
}
 
interface MyTemplateProps {
  title: string;
  breadcrumbs?: BreadcrumbItem[];
  data?: MyTemplateData;
  // ... other TemplateProps
}
 
export function MyTemplate({ title, breadcrumbs, data, actions, audit }: MyTemplateProps) {
  return (
    <TemplateFrame
      title={title}
      breadcrumbs={breadcrumbs}
      actions={actions}
      audit={audit}
    >
      {/* Your template content */}
    </TemplateFrame>
  );
}

Accessibility Notes

  • Keep page headings unique and descriptive.
  • Ensure audit and evidence regions are labeled.
  • Provide keyboard access to all actions.

Tokens to Customize

  • colorBgContainer
  • colorPrimary
  • borderRadiusLG
Documentation StandardBase UI