Site Components

SiteComponents is the interface for building marketing sites, landing pages, blogs, and documentation. These components are designed for public-facing, content-rich experiences.

Quick Start

import type { SiteComponents } from 'mdxui'

export const components: SiteComponents = {
  // Required layout
  Site,
  Header,
  Footer,
  LandingPage,
  Page,

  // Optional sections
  Hero,
  Features,
  Pricing,
  Testimonials,
  CTA,
  FAQ,

  // Optional content (auto-wire to Payload)
  Blog,
  BlogPost,
  Docs,
  DocsPage,
}

Component Categories

Layout Components

Core structural components that define the site shell.

• Site - Root wrapper with navigation and footer
• Header - Site header with navigation
• Footer - Site footer with links and legal
• LandingPage - Full landing page layout
• Page - Generic page layout

Section Components

Reusable sections for building landing pages.

• Hero - Above-the-fold hero section
• Features - Feature grid/list
• Pricing - Pricing tables and plans
• Testimonials - Social proof sections
• CTA - Call-to-action sections
• FAQ - Frequently asked questions

Content Components

Components that auto-wire to Payload CMS collections.

• Blog - Blog listing page (→ posts collection)
• BlogPost - Individual blog post
• Docs - Documentation index (→ docs collection)
• DocsPage - Individual doc page