Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Astro Integration
Astro components and layouts for building content-focused sites with Vanilla Breeze.
Overview
The Astro integration provides typed components and layouts that follow Vanilla Breeze conventions. All components support Astro's islands architecture and work with content collections.
Location: /integrations/astro/
Installation
Copy the astro/ directory into your Astro project's src/ folder:
Copy integration files
cp -r integrations/astro/* src/Then import styles in your main CSS or layout:
Import styles
---import '../styles/astro-overrides.css';---Components
BaseHead
Standard <head> setup with meta tags, OG data, and theme initialization.
BaseHead usage
---import BaseHead from './components/BaseHead.astro';---<head> <BaseHead title="Page Title" description="Page description" image="/og-image.png" /></head>Props:
title- Page title (required)description- Meta description (required)image- OG image URL (optional)canonicalURL- Canonical URL (optional)
ThemeToggle
Theme switcher button using the theme-picker web component.
ThemeToggle usage
---import ThemeToggle from './components/ThemeToggle.astro';---<ThemeToggle />NavTree
Tree navigation from structured data with automatic active state detection.
NavTree usage
---import NavTree from './components/NavTree.astro'; const nav = [ { label: 'Home', href: '/' }, { label: 'Docs', href: '/docs/', children: [ { label: 'Getting Started', href: '/docs/start/' }, { label: 'Components', href: '/docs/components/' } ] }];---<NavTree items={nav} />Props:
items- Navigation tree array (required)currentPath- Current URL path (optional, auto-detected)density- 'default' | 'compact' (optional)
PageToc
Auto-generated table of contents from page headings.
PageToc usage
---import PageToc from './components/PageToc.astro';const { headings } = Astro.props;---<PageToc headings={headings} />Props:
headings- Array from getHeadings() (required)label- Section label (optional)depth- Max heading depth (optional, default: 3)
Card
Wrapper for the layout-card custom element.
Card usage
<Card variant="outlined" interactive href="/item/"> <h3>Card Title</h3> <p>Card content</p></Card>Props:
variant- 'default' | 'outlined' | 'elevated' (optional)interactive- Makes entire card clickable (optional)href- Link URL when interactive (optional)
FormField
Wrapper for the form-field custom element.
FormField usage
<FormField label="Email" name="email" type="email" required hint="We'll never share your email."/>Props:
label- Field label (required)name- Input name (required)type- Input type (optional, default: 'text')required- Required field (optional)hint- Helper text (optional)error- Error message (optional)
CodeBlock & BrowserWindow
Helper components for demos and documentation.
Demo components
<CodeBlock code={codeString} lang="javascript" filename="example.js" /> <BrowserWindow src="/demos/example.html" url="https://example.com" title="Demo"/>Layouts
BaseLayout
Minimal page structure with header and footer.
BaseLayout usage
---import BaseLayout from './layouts/BaseLayout.astro';---<BaseLayout title="Home" description="Welcome"> <h1>Hello World</h1></BaseLayout>DocsLayout
Documentation page with sidebar navigation and table of contents.
DocsLayout usage
---import DocsLayout from './layouts/DocsLayout.astro';---<DocsLayout title="Getting Started" description="Learn how to use Vanilla Breeze" headings={headings} navigation={nav}> <slot /></DocsLayout>BlogLayout
Blog post layout with metadata and author info.
BlogLayout usage
<BlogLayout title="Post Title" description="Post excerpt" pubDate={new Date('2024-01-15')} author="John Doe" tags={['css', 'web']}> <slot /></BlogLayout>LandingLayout
Marketing page with hero support and multi-column footer.
LandingLayout usage
<LandingLayout title="Product" description="Description"> <section class="hero">...</section> <section class="features">...</section></LandingLayout>Styles
Import astro-overrides.css for Astro-specific styles:
- View transition animations
- Island loading states
- Content collection styling
- Light/dark code block switching
TypeScript Support
The integration includes TypeScript types for all component props. Import from index.ts:
TypeScript types
import type { NavItem, Heading } from './astro'; const nav: NavItem[] = [ { label: 'Home', href: '/' }];