Component library

Every theme ships the same ~27 section components. The visual treatment varies per theme, but the API and the data shape are identical.

See them all at once

Every theme has a /sections/ route that renders every component on one page with example data. It’s the fastest way to browse what you have:

http://localhost:4321/sections/

Use it as a style guide and as a “pick a section to add to my new page” reference.

The list

Component	Used for	Data source
`Hero`	Above-the-fold marketing hero	Component (hardcoded)
`LogoCloud`	”Trusted by ___” client logo strip	Component
`Features`	Feature grid (3–6 columns)	Component
`ImageText`	Side-by-side image + heading + paragraph	Component
`Pricing`	Pricing tiers (1–4 plans)	Component
`Testimonials`	Quote cards	Component
`Comparison`	”Us vs. competitors” table	`siteConfig.comparison`
`FAQ`	Accordion of common questions	Component
`CTA`	Big “start your trial” call-to-action	Component
`Team`	Team member cards	`siteConfig.team`
`Timeline`	Vertical timeline of milestones	`siteConfig.timeline`
`Gallery`	Image grid	`siteConfig.gallery`
`Carousel`	Sliding image / quote carousel	`siteConfig.carousel`
`Tabs`	Tabbed product breakdown	`siteConfig.tabs`
`AppDownload`	iOS / Android badge block	`siteConfig.appDownload`
`Map`	Embedded Google Map + address	`siteConfig.map`
`Video`	YouTube / Vimeo embed	`siteConfig.video`
`Stats`	Big-number stats row	Component
`Newsletter`	Email-capture block	`siteConfig.newsletter`
`Contact`	Contact form	`siteConfig.contactForm`
`Header`	Sticky site header	`siteConfig.navigation`
`Footer`	Site footer	`siteConfig.footer`, `social`
`Sidebar`	(long-form pages) sticky TOC sidebar	Component
`BlogHero`	Blog index hero strip	Component
`BlogGrid`	Grid of post cards	`getCollection("blog")`
`BlogPost`	Blog post body wrapper	Markdown frontmatter
`LegalContent`	Privacy / terms wrapper (typographic refinement)	Slot
`ResourceHub`	Cards-led resource index (newer themes)	Component
`AppDownload`	App-store badges block	`siteConfig.appDownload`
`Icon`	Inline-SVG icon dispatcher	`name` prop

(A few theme-specific extras — Comparison, AppDownload, Map — only appear in themes where they make sense. Check src/components/ in your specific theme for the exact set.)

Two flavors of section

Hardcoded sections keep their content inside the .astro file. Edit the markup directly. Examples: Hero, Pricing, FAQ, Testimonials, LogoCloud, Features, CTA.

Data-driven sections read from siteConfig. Edit a block in src/config/site.ts and the section updates. Examples: Team, Timeline, Comparison, Gallery, Carousel, Tabs, AppDownload, Map, Video, Newsletter, Contact.

See Customize → Section data for the full data shapes.

Using a section in a new page

Drop the import + the component into any .astro file:

---
import Layout from "~/layouts/Layout.astro";
import Header from "~/components/Header.astro";
import Hero from "~/components/Hero.astro";
import Pricing from "~/components/Pricing.astro";
import FAQ from "~/components/FAQ.astro";
import Footer from "~/components/Footer.astro";
---

<Layout title="Aurora 2.0 — Launch">
  <Header />
  <main id="main">
    <Hero />
    <Pricing />
    <FAQ />
  </main>
  <Footer />
</Layout>

What’s next

Customize → New sections — build a fully new section in the same style.
Customize → Section data — wire siteConfig data into the data-driven sections.