Site Hierarchy

The Site interface follows a four-level hierarchy that mirrors how you naturally think about building a website.

Site (root container)
└── Page (full-page layouts)
    └── Section (page sections)
        └── Collection (lists/grids of things)
            └── Thing (individual items)

The Four Levels

Level 1: Site

The root container that provides global context.

Component: <Site>

Responsibilities:

Theme provider
Layout shell (Header + Footer)
Global metadata
Navigation context

Props:

interface SiteProps {
  name: string
  domain?: string
  theme?: 'light' | 'dark' | 'system'
  children: ReactNode
}

Payload Collection: sites

Level 2: Page

Full-page layouts that compose sections.

Components:

<LandingPage> - Homepage with hero, features, pricing
<Page> - Generic content page
<BlogPage> - Blog listing (auto-wires to posts)
<DocsPage> - Documentation page (auto-wires to docs)

Responsibilities:

Page-level metadata (title, description)
Section composition
Page-specific layout

Example Props:

interface PageProps {
  title?: string
  description?: string
  children: ReactNode
}

interface LandingPageProps {
  children: ReactNode  // Sections: Hero, Features, Pricing, etc.
}

Payload Collections: pages, posts, docs

Level 3: Section

Reusable sections that compose components.

Components:

<Hero> - Hero section with CTA
<Features> - Feature grid/bento
<Pricing> - Pricing tiers
<Testimonials> - Customer quotes
<FAQ> - FAQ accordion
<CTA> - Call-to-action banner

Responsibilities:

Section-level layout
Component composition
Content structure

Example Props:

interface HeroProps {
  title: string
  subtitle?: string
  cta: CTA
  secondaryCta?: CTA
  image?: string
  variant?: 'default' | 'centered' | 'split'
}

interface FeaturesProps {
  title?: string
  description?: string
  features: FeatureItem[]
  variant?: 'grid' | 'list' | 'bento'
  columns?: number
}

Payload Collections: Some sections auto-wire (e.g., <Features> → features)

Level 4: Collection

Lists or grids of things.

Pattern: Sections often contain collections of items.

Examples:

<Features> contains a collection of FeatureItem[]
<Pricing> contains a collection of PricingTier[]
<Testimonials> contains a collection of Testimonial[]
<FAQ> contains a collection of FAQItem[]

Structure:

// Section with collection
<Features
  features={[
    { title: "Fast", description: "...", icon: "..." },
    { title: "Secure", description: "...", icon: "..." },
    { title: "Scalable", description: "...", icon: "..." },
  ]}
/>

// Or auto-wire from Payload
<Features /> // Fetches from 'features' collection

Level 5: Thing

Individual items within collections.

Pattern: The atomic units of content.

Examples:

interface FeatureItem {
  title: string
  description: string
  icon?: ReactNode
  href?: string
}

interface PricingTier {
  name: string
  price: string
  description?: string
  features: string[]
  cta: CTA
  highlighted?: boolean
}

interface Testimonial {
  quote: string
  author: string
  title?: string
  company?: string
  avatar?: string
}

interface FAQItem {
  question: string
  answer: string
}

Composition Example

Here's how the hierarchy composes in practice:

<Site name="Acme Inc" theme="system">
  <LandingPage>
    <Hero
      title="Build Better Products"
      subtitle="The fastest way to ship."
      cta={{ label: "Get Started", href: "/signup" }}
    />

    <Features
      title="Why Choose Acme"
      features={[
        { title: "Fast", description: "Ship in minutes" },
        { title: "Secure", description: "Enterprise-grade" },
        { title: "Scalable", description: "Grows with you" },
      ]}
    />

    <Pricing
      tiers={[
        {
          name: "Starter",
          price: "$29/mo",
          features: ["10 users", "100GB storage"],
          cta: { label: "Start Free", href: "/signup" }
        },
        // More tiers...
      ]}
    />
  </LandingPage>
</Site>

Breakdown:

Site provides global layout (Header + Footer)
LandingPage composes sections
Hero, Features, Pricing are sections
features array is a collection
Each feature object is a thing

Auto-Wiring to Payload

Components marked with @autowire automatically fetch from Payload collections:

// Manual props (for static sites)
<Features
  features={[
    { title: "Fast", description: "..." },
  ]}
/>

// Auto-wire (for CMS-driven sites)
<Features /> // Fetches from 'features' collection

// Both can be used together
<Features
  features={manualFeatures}  // Override auto-fetch
/>

Auto-wired Components:

<Blog> → posts collection
<BlogPost> → posts collection
<Docs> → docs collection
<DocsPage> → docs collection

Site Type Specializations

Different site types come with different default pages and sections:

Marketing Site

<Site type="marketing">
  <LandingPage>
    <Hero />
    <Features />
    <Pricing />
    <Testimonials />
    <FAQ />
    <CTA />
  </LandingPage>
  <Page path="/about">...</Page>
  <Blog />
</Site>

Documentation Site

<Site type="docs">
  <DocsPage>...</DocsPage>
  <APIReferencePage>...</APIReferencePage>
  <ChangelogPage>...</ChangelogPage>
</Site>

Blog Site

<Site type="blog">
  <BlogPage>...</BlogPage>
  <BlogPost>...</BlogPost>
  <AuthorPage>...</AuthorPage>
  <CategoryPage>...</CategoryPage>
</Site>

Directory Site

<Site type="directory">
  <DirectoryPage>...</DirectoryPage>
  <CategoryPage>...</CategoryPage>
  <ListingPage>...</ListingPage>
  <SearchPage>...</SearchPage>
</Site>

See Site Types for the complete taxonomy.

Next Steps

Site Component - Root wrapper configuration
Header Component - Navigation header
Footer Component - Site footer
Section Components - Hero, Features, Pricing, etc.

Site Hierarchy

On this page