Components

Layout

The main layout component wraps all pages and handles global features like smooth scrolling, custom scrollbar, and view transitions.

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Page Title">
  <!-- Your page content -->
</Layout>

Header

Responsive header with multiple layout options, mega menu navigation, and mobile menu. Configuration is pulled from site.ts.

<Header />

Features:

• 3 layouts - Standard, centered, or minimal navigation
• Mega menus - Multi-column dropdown navigation with sections
• Mobile responsive - Hamburger menu with slide-in navigation
• CTA button - Configurable shape (rounded or pill)
• Nav spacing - Normal or compact spacing for navigation items

Navigation (React)

React-based navigation component with Radix UI primitives for accessible mega menus with hover interactions.

<Navigation
  items={navItems}
  headerLayout="standard"
  navSpacing="normal"
  client:load
/>

Props:

• items - Array of NavItem (simple links or mega menus)
• headerLayout - 'standard' | 'centered' | 'minimal'
• navSpacing - 'normal' | 'compact'

Logo

Flexible logo component supporting multiple styles: text-only, icon with text, gradient box, emoji, or custom SVG icons.

<!-- Uses siteConfig settings -->
<Logo />

<!-- With custom props -->
<Logo width={140} height={32} />

<!-- In ShowcaseLayout with config override -->
<Logo config={showcaseConfig} />

Logo mark types:

• text-only - Just the brand name, no icon
• icon-text - Icon/image followed by brand name
• gradient-box - Single character in a gradient background box

Icon sources (in priority order): emoji → svgIcon → src

Footer

Footer component with multiple layout options, social links, and legal link configurations.

<Footer />

Layout options:

• grid-4col - 4-column grid with brand, link groups, and social
• flex-row - Single row with brand and inline links
• flex-sections - Flexible sections with grouped links
• minimal-centered - Minimal centered footer with basic info

SubNav

Sticky sub-navigation with glassmorphism effects. Two variants available: simple and grouped.

<!-- Simple variant -->
<SubNav variant="simple">
  <a href="/docs/" class="active">Getting Started</a>
  <a href="/docs/config/">Configuration</a>
</SubNav>

<!-- Grouped variant with color-coded groups -->
<SubNav variant="grouped">
  <div class="sub-nav-group sub-nav-group-primary">
    <a href="/design/">Web Design</a>
    <a href="/branding/">Branding</a>
  </div>
  <div class="sub-nav-group sub-nav-group-secondary">
    <a href="/hosting/">Hosting</a>
  </div>
</SubNav>

Available group classes (up to 6):

• sub-nav-group-primary - Blue gradient
• sub-nav-group-secondary - Green gradient
• sub-nav-group-tertiary - Orange gradient
• sub-nav-group-quaternary - Purple gradient
• sub-nav-group-quinary - Pink gradient
• sub-nav-group-senary - Cyan gradient

FadeInOnScroll

Wrapper component that reveals content with a fade-in animation when it enters the viewport.

<FadeInOnScroll delay={100}>
  <div class="card">
    Content that fades in on scroll
  </div>
</FadeInOnScroll>

Props:

• delay - Delay in milliseconds before animation starts (default: 0)

ShowcaseLayout

Special layout for recipe showcase pages. Allows overriding site configuration for individual pages to demonstrate different recipes.

---
import ShowcaseLayout from "../../layouts/ShowcaseLayout.astro";
import { newsletterRecipe } from "../../recipes";
---

<ShowcaseLayout
  title="Newsletter Example"
  recipe={newsletterRecipe}
>
  <!-- Page content with recipe styling -->
</ShowcaseLayout>

Props:

• title - Page title
• recipe - Recipe object to use for styling

Form Components

Build accessible forms with validation, error states, and spam protection. Includes Form wrapper, Input fields, and Button components.

View Form Components Documentation →

Card

A flexible card component for displaying content in a contained box. Supports multiple variants and optional interactive states.

Live Examples:

<Card variant="default" padding="md" rounded="md">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</Card>

<!-- As a clickable link -->
<Card href="/page" variant="elevated">
  Click me
</Card>

Props:

• variant - 'default' | 'elevated' | 'outlined' | 'filled'
• padding - 'none' | 'sm' | 'md' | 'lg'
• rounded - 'none' | 'sm' | 'md' | 'lg' | 'full'
• href - Makes card clickable as a link

Badge

A small label for status indicators, tags, and categories. Available in multiple colors and variants.

Live Examples:

<Badge>Default</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green" variant="solid">Success</Badge>
<Badge color="red" variant="outline">Error</Badge>
<Badge color="purple" pill>Tag</Badge>

Props:

• variant - 'default' | 'solid' | 'outline'
• color - 'gray' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'pink'
• size - 'sm' | 'md' | 'lg'
• pill - Fully rounded badge (boolean)