@mdxui/beacon

Site template components for mdxui - landing pages, hero sections, and marketing components.

Installation

npm install @mdxui/beacon @mdxui/primitives
# or
pnpm add @mdxui/beacon @mdxui/primitives

Quick Start

import { Site, Hero, Features, Pricing, FAQs } from '@mdxui/beacon'

export default function LandingPage() {
  return (
    <Site
      logo={<Logo />}
      header={{
        links: [
          { label: 'Features', href: '#features' },
          { label: 'Pricing', href: '#pricing' },
        ],
        primaryCta: 'Get Started',
      }}
      hero={{
        title: 'Build faster with',
        highlightedText: 'mdxui',
        description: 'Production-ready components for your next project.',
        primaryButtonText: 'Get Started',
        primaryButtonHref: '/signup',
      }}
      features={{
        items: [
          { iconName: 'Zap', title: 'Fast', description: 'Lightning fast performance.' },
          { iconName: 'Shield', title: 'Secure', description: 'Built with security in mind.' },
        ],
      }}
      pricing={{
        title: 'Simple Pricing',
        description: 'Choose the plan that works for you.',
        tiers: [
          { name: 'Free', price: '$0', features: ['Basic features'] },
          { name: 'Pro', price: '$29', features: ['All features', 'Priority support'] },
        ],
      }}
      footer={{
        companyName: 'Your Company',
        description: 'Building the future.',
      }}
    />
  )
}

Components

Layout Components

• Site / LandingPage - Full landing page wrapper
• LandingLayout - Layout with header/footer
• Header - Navigation header
• Footer - Site footer

Hero Variants

• Hero - Default hero section
• HeroCentered - Centered text hero
• HeroAnimated - Animated hero with effects
• HeroGradient - Gradient background hero
• HeroImageBeside - Hero with side image
• HeroVideoBelow - Hero with video below
• HeroCodeBelow - Hero with code snippet

Section Components

• Features - Feature grid/list
• Pricing - Pricing table
• FAQs - Accordion FAQ section
• Testimonials - Customer testimonials
• Stats - Statistics display
• CTA - Call-to-action section
• LogoCloud - Partner/client logos
• FeatureGrid - Grid of feature cards
• Directory - Directory listing

Animation Components

• Marquee - Infinite scroll marquee
• StickyScroll - Scroll-triggered reveals
• DynamicIsland - iOS-style dynamic island
• NotificationIsland - Notification popups

Shared Utilities

• Highlighter - Syntax highlighting
• CodeTabs - Tabbed code blocks
• Terminal - Terminal display
• Hatch - Background pattern

Peer Dependencies

• react ^18.0.0 || ^19.0.0
• @mdxui/primitives - Required for base UI components

Links

• Documentation
• GitHub
• npm

License

MIT