Site Component Props

This page documents all props for Site type components based on the type definitions in packages/mdxui/src/types/site-types.ts.

Base Site Props

All site types extend from BaseSite with these common properties:

interface BaseSite {
  /** Site type identifier */
  type: string
  /** Site display name */
  name: string
  /** Primary domain (e.g., "example.com") */
  domain?: string
  /** Site description for SEO */
  description?: string
  /** Theme mode: light, dark, or system preference */
  theme?: 'light' | 'dark' | 'system'
  /** Array of navigation items for the site header */
  navigation?: NavItem[]
  /** Primary brand color in hex format */
  primaryColor?: string
  /** Logo image URL or React component */
  logo?: any
}

Marketing Site

Landing pages and conversion-focused sites.

interface MarketingSite extends BaseSite {
  type: 'marketing'
  /** Conversion and analytics tracking configuration */
  tracking?: {
    /** Analytics provider ID (e.g., Google Analytics tracking ID) */
    analytics?: string
    /** Conversion tracking pixel ID */
    conversion?: string
  }
  /** A/B testing configuration for experimentation */
  testing?: {
    /** Whether A/B testing is enabled */
    enabled?: boolean
    /** A/B testing provider (e.g., Optimizely, VWO) */
    provider?: string
  }
}

Sections: Hero (required), Features, Pricing, Testimonials, CTA (required), FAQ, LogoCloud

Docs Site

Technical documentation and knowledge bases.

interface DocsSite extends BaseSite {
  type: 'docs'
  /** Documentation-specific configuration */
  docs?: {
    /** GitHub repository URL or slug (e.g., "owner/repo") */
    repository?: string
    /** Default Git branch for edit links */
    branch?: string  // default: 'main'
    /** Enable documentation search functionality */
    search?: boolean  // default: true
    /** Enable version switching for documentation */
    versioning?: boolean  // default: false
  }
}

Sections: DocsHeader (required), DocsSidebar (required), DocsPage (required), TableOfContents, Breadcrumbs, PrevNext, EditPage, CodeBlock

Blog Site

Content publishing, articles, and blog posts.

interface BlogSite extends BaseSite {
  type: 'blog'
  /** Blog-specific configuration */
  blog?: {
    /** Number of blog posts to display per page */
    postsPerPage?: number  // default: 10
    /** Enable categorization of blog posts */
    categories?: boolean  // default: true
    /** Enable tagging of blog posts */
    tags?: boolean  // default: true
    /** Enable author profile pages */
    authors?: boolean  // default: true
    /** Generate RSS feed for blog posts */
    rss?: boolean  // default: true
  }
}

Sections: BlogHeader (required), BlogGrid (required), BlogPost (required), BlogSidebar, AuthorBio, RelatedPosts, Newsletter, Comments

Directory Site

Listings, catalogs, and searchable directories.

interface DirectorySite extends BaseSite {
  type: 'directory'
  /** Directory-specific configuration */
  directory?: {
    /** Number of directory listings per page */
    itemsPerPage?: number  // default: 20
    /** Enable filtering sidebar or panel */
    filters?: boolean  // default: true
    /** Enable sorting options for listings */
    sorting?: boolean  // default: true
    /** Enable map-based view of listings */
    map?: boolean  // default: false
    /** Search configuration for directory */
    search?: {
      /** Enable search functionality */
      enabled?: boolean  // default: true
      /** Search input placeholder text */
      placeholder?: string
    }
  }
}

Sections: DirectoryHeader (required), SearchBar (required), FilterPanel, ListingGrid (required), ListingCard (required), ListingDetail (required), MapView, Pagination

Marketplace Site

Multi-sided platforms with buyers and sellers.

interface MarketplaceSite extends BaseSite {
  type: 'marketplace'
  /** Marketplace-specific configuration */
  marketplace?: {
    /** Payment provider (e.g., "stripe", "paypal") */
    payment?: string
    /** Platform commission percentage (0-100) */
    commission?: number
    /** Enable seller management dashboards */
    sellerDashboards?: boolean  // default: true
    /** Enable buyer protection policies */
    buyerProtection?: boolean  // default: true
    /** Enable product/seller reviews and ratings */
    reviews?: boolean  // default: true
  }
}

Sections: MarketplaceHeader (required), ProductGrid (required), ProductCard (required), ProductDetail (required), SellerProfile, ShoppingCart, Checkout, Reviews, SellerDashboard

Community Site

Forums, discussions, and member communities.

interface CommunitySite extends BaseSite {
  type: 'community'
  /** Community-specific configuration */
  community?: {
    /** Enable discussion forums */
    forums?: boolean  // default: true
    /** Enable member profile pages */
    profiles?: boolean  // default: true
    /** Enable direct messaging between members */
    messaging?: boolean  // default: false
    /** Enable reputation/karma system */
    reputation?: boolean  // default: true
    /** Enable content moderation tools */
    moderation?: boolean  // default: true
  }
}

Sections: CommunityHeader (required), ForumList (required), ThreadList (required), Thread (required), MemberList, MemberProfile, ActivityFeed, Leaderboard

Portfolio Site

Work showcase and project portfolios.

interface PortfolioSite extends BaseSite {
  type: 'portfolio'
  /** Portfolio-specific configuration */
  portfolio?: {
    /** Project categories for filtering */
    categories?: string[]
    /** Enable filtering projects by category */
    filtering?: boolean  // default: true
    /** Project display layout style */
    style?: 'grid' | 'masonry' | 'slider'  // default: 'grid'
    /** Include contact form for inquiries */
    contact?: boolean  // default: true
  }
}

Sections: PortfolioHeader (required), PortfolioHero, ProjectGrid (required), ProjectCard (required), ProjectDetail (required), About, Skills, ContactForm

Personal Site

Personal branding and resume sites.

interface PersonalSite extends BaseSite {
  type: 'personal'
  /** Personal site-specific configuration */
  personal?: {
    /** Social media profile links */
    social?: Array<{
      /** Social media platform name (e.g., "twitter", "linkedin") */
      platform: string
      /** Profile URL for the platform */
      url: string
    }>
    /** Include resume/CV section */
    resume?: boolean  // default: false
    /** Include blog section */
    blog?: boolean  // default: false
  }
}

Sections: PersonalHeader (required), PersonalHero (required), About, Experience, Education, Skills, Portfolio, Contact

Event Site

Conferences, meetups, and event management.

interface EventSite extends BaseSite {
  type: 'event'
  /** Event-specific configuration */
  event?: {
    /** Event date (ISO string or formatted date) */
    date?: string
    /** Event location or venue name */
    location?: string
    /** Enable ticket sales and registration */
    ticketing?: boolean  // default: true
    /** Include event schedule/agenda */
    schedule?: boolean  // default: true
    /** Include speaker profiles and bios */
    speakers?: boolean  // default: true
    /** Include venue details and map */
    venue?: boolean  // default: true
  }
}

Sections: EventHeader (required), EventHero (required), Schedule, Speakers, Venue, Sponsors, Tickets, FAQ

Story Site

Storytelling, case studies, and narrative experiences.

interface StorySite extends BaseSite {
  type: 'story'
  /** Story-specific configuration */
  story?: {
    /** Story presentation format */
    format?: 'linear' | 'scrollytelling' | 'interactive'  // default: 'linear'
    /** Enable chapter navigation */
    chapters?: boolean  // default: true
    /** Show reading progress indicator */
    progress?: boolean  // default: true
    /** Enable rich media (images, video, audio) */
    multimedia?: boolean  // default: true
  }
}

Sections: StoryHeader, StoryCover (required), StoryChapter (required), StoryMedia, StoryQuote, StoryTimeline, StoryNavigation, ProgressIndicator

API Site

API documentation and developer portals.

interface APISite extends BaseSite {
  type: 'api'
  /** API documentation-specific configuration */
  api?: {
    /** URL to OpenAPI/Swagger specification file */
    specUrl?: string
    /** Enable interactive API playground */
    playground?: boolean  // default: true
    /** Include authentication documentation and examples */
    auth?: boolean  // default: true
    /** Include code samples for API endpoints */
    codeSamples?: boolean  // default: true
    /** Programming languages for code samples (e.g., ["javascript", "python", "curl"]) */
    languages?: string[]
  }
}

Sections: APIHeader (required), APISidebar (required), APIReference (required), APIPlayground, CodeSamples, Authentication, RateLimits, Changelog

Agent Site

AI agent interfaces and chat experiences.

interface AgentSite extends BaseSite {
  type: 'agent'
  /** AI agent-specific configuration */
  agent?: {
    /** AI model identifier (e.g., "gpt-4", "claude-3") */
    model?: string
    /** Enable persistent chat history */
    history?: boolean  // default: true
    /** Enable AI function/tool calling */
    functions?: boolean  // default: true
    /** Enable streaming responses for better UX */
    streaming?: boolean  // default: true
    /** Enable multimodal inputs (images, files) */
    multimodal?: boolean  // default: false
  }
}

Sections: AgentHeader (required), ChatInterface (required), MessageList (required), InputBar (required), AgentProfile, FunctionCalls, HistorySidebar, SettingsPanel

Agency Site

Agency services, team, and client showcase.

interface AgencySite extends BaseSite {
  type: 'agency'
  /** Agency-specific configuration */
  agency?: {
    /** Service categories offered by the agency */
    services?: string[]
    /** Include team member profiles */
    team?: boolean  // default: true
    /** Include client case studies */
    caseStudies?: boolean  // default: true
    /** Include client testimonials */
    testimonials?: boolean  // default: true
    /** Include contact/inquiry form */
    contact?: boolean  // default: true
  }
}

Sections: AgencyHeader (required), AgencyHero (required), Services (required), CaseStudies, Team, Clients, Process, ContactForm

Platform Site

Multi-tenant platforms and SaaS dashboards.

interface PlatformSite extends BaseSite {
  type: 'platform'
  /** Platform-specific configuration */
  platform?: {
    /** Enable multi-tenant architecture */
    multiTenant?: boolean  // default: true
    /** Enable organization/workspace management */
    organizations?: boolean  // default: true
    /** Enable role-based access control (RBAC) */
    rbac?: boolean  // default: true
    /** Enable billing and subscription management */
    billing?: boolean  // default: true
    /** Include platform admin panel */
    admin?: boolean  // default: true
  }
}

Sections: PlatformHeader (required), PlatformDashboard (required), WorkspaceSelector, OrganizationSettings, TeamManagement, BillingDashboard, AdminPanel, Analytics

Common Types

NavItem

Navigation item structure used across all sites:

interface NavItem {
  label: string
  href: string
  icon?: string
  description?: string
  children?: NavItem[]
}

CTA

Call-to-action configuration:

interface CTA {
  text: string
  href: string
}

ThemeMode

type ThemeMode = 'light' | 'dark' | 'system'

Site Component Props

On this page