App Components

AppComponents is the interface for building authenticated SaaS applications. These components provide the shell, navigation, and feature panels for logged-in user experiences.

Quick Start

import type { AppComponents } from 'mdxui'

export const components: AppComponents = {
  // Required layout
  App,
  Shell,
  Sidebar,
  Header,
  Dashboard,
  Settings,

  // Optional features (auto-wire to Payload)
  DeveloperDashboard,
  APIKeys,
  Webhooks,
  Usage,
  Team,
  Billing,

  // Optional Payload admin overrides
  ListView,
  EditView,
  CreateView,
}

Component Categories

Layout Components

Core structural components for the application shell.

• App - Root wrapper with auth context
• Shell - App shell with sidebar
• Sidebar - Navigation sidebar
• Header - App header with user menu
• Dashboard - Main dashboard layout
• Settings - Settings page layout

Feature Components

Components for common SaaS features that auto-wire to Payload collections.

• DeveloperDashboard - API overview dashboard
• APIKeys - API key management (→ apiKeys collection)
• Webhooks - Webhook configuration (→ webhooks collection)
• Usage - Usage metrics and limits
• Team - Team member management (→ users collection)
• Billing - Subscription and billing

Admin Override Components

Components that replace Payload admin UI views.

• ListView - Custom collection list view
• EditView - Custom document edit view
• CreateView - Custom document create view