AppComponents

The AppComponents interface defines the contract for SaaS application templates.

import type { AppComponents } from 'mdxui'

export const components: AppComponents = {
  App,
  Shell,
  Sidebar,
  Header,
  Dashboard,
  Settings,
  // ... optional components
}

Required Components

App

Root wrapper component for the application.

interface AppProps {
  name: string
  auth?: {
    provider: 'workos' | 'clerk' | 'auth0' | 'custom'
    clientId?: string
    loginUrl?: string
    redirectUri?: string
  }
  children: ReactNode
}

Shell

App shell layout with sidebar and header slots.

interface ShellProps {
  sidebar?: boolean
  header?: boolean
  sidebarCollapsed?: boolean
  children: ReactNode
}

Navigation sidebar component.

interface SidebarProps {
  nav: NavItem[]
  user?: {
    name: string
    email: string
    avatar?: string
  }
  logo?: ReactNode
  collapsed?: boolean
  onCollapse?: () => void
}

Top header bar component.

interface AppHeaderProps {
  user?: {
    name: string
    email: string
    avatar?: string
  }
  showSearch?: boolean
  showNotifications?: boolean
  breadcrumbs?: Array<{ label: string; href?: string }>
}

Dashboard

Main dashboard/overview view.

interface DashboardProps {
  title?: string
  metrics?: Array<{
    label: string
    value: string | number
    change?: number
    trend?: 'up' | 'down' | 'neutral'
  }>
  children: ReactNode
}

Settings

Settings page layout.

interface SettingsProps {
  sections?: Array<
    'profile' | 'security' | 'notifications' |
    'billing' | 'team' | 'api' | 'integrations'
  >
  children: ReactNode
}

Optional Feature Components

DeveloperDashboard

Complete developer console combining API keys, webhooks, and usage.

interface DeveloperDashboardProps {
  project: string
  showAPIKeys?: boolean
  showWebhooks?: boolean
  showUsage?: boolean
  showLogs?: boolean
  theme?: {
    preset?: string
    mode?: 'light' | 'dark' | 'system'
    custom?: Record<string, string>
  }
}

APIKeys

interface APIKeysProps {
  project: string
  allowCreate?: boolean
  allowDelete?: boolean
  showLastUsed?: boolean
  keys?: APIKey[]  // Manual override
}

Auto-wires to: apiKeys collection

Webhooks

interface WebhooksProps {
  project: string
  allowCreate?: boolean
  allowEdit?: boolean
  allowDelete?: boolean
  showLogs?: boolean
  webhooks?: Webhook[]  // Manual override
}

Auto-wires to: webhooks collection

Usage

interface UsageProps {
  project: string
  period?: 'hour' | 'day' | 'week' | 'month' | 'year'
  metrics?: string[]
  showBreakdown?: boolean
  data?: UsageData  // Manual override
}

Auto-wires to: usageRecords collection

Team

interface TeamProps {
  workspace: string
  allowInvite?: boolean
  allowRoleChange?: boolean
  allowRemove?: boolean
  members?: Member[]  // Manual override
}

Auto-wires to: members collection

Billing

interface BillingProps {
  customer: string
  showInvoices?: boolean
  showPaymentMethods?: boolean
  showUsage?: boolean
  subscription?: Subscription  // Manual override
}

Auto-wires to: subscriptions collection

Payload Admin Overrides

These components override default Payload admin views.

ListView

interface ListViewProps {
  collection: string
  columns?: string[]
  filters?: Filter[]
  defaultSort?: string
  pageSize?: number
}

EditView

interface EditViewProps {
  collection: string
  id: string
  fields?: string[]
  layout?: 'default' | 'tabs' | 'sections'
}

CreateView

interface CreateViewProps {
  collection: string
  defaultValues?: Record<string, unknown>
  fields?: string[]
}

AppComponents Reference