Skip to content

Basics / 03

Theme structure

How a BaseLayer theme's folders fit together, and the handful of ideas that make it easy to change.

Browse the docs

All BaseLayer themes share one layout. Once you know your way around one, you know them all.

Folders

src/
  assets/images/   Photos, optimized at build time
  blocks/          Full-width page sections (navbar, footer, hero, ...)
  components/      Smaller building blocks used inside sections
  config/          Site settings, split by job
  content/blog/    Blog posts in Markdown
  layouts/         Page shells: BaseLayout, ProseLayout
  lib/             Helpers for SEO, schema, images, and navigation
  pages/           One file per route
  styles/          Design tokens and base styles
public/            Files served as-is: favicon, logos, og.png
scripts/           Build helpers: social images, SEO check, IndexNow

Pages every theme includes

Page File
Home src/pages/index.astro
About src/pages/about.astro
Contact src/pages/contact.astro
Blog index and posts src/pages/blog/
Privacy, terms, accessibility src/pages/privacy.md, terms.md, accessibility.md
404 src/pages/404.astro

Plus the generated files: /rss.xml, /sitemap-index.xml, /robots.txt, /llms.txt, and /schemamap.xml.

Themes add their own pages on top, such as a services page or a menu. Your theme’s page under Themes lists them.

Blocks and components

Blocks live in src/blocks/ and are full-width sections: a navbar, a hero, a pricing table, a footer. Pages are mostly a stack of blocks.

Components live in src/components/ and are the smaller parts blocks are made of:

Folder Examples
elements/ Button, Text, Icon, OptimizedImage
containers/ Wrapper, PageHeader, CtaBand
forms/ ContactForm
nav/, footer/ Navbar menus and footer bars
global/ Seo, JsonLd, Reveal

A theme only ships the blocks it uses, so there’s nothing to delete before launch.

Config first, props second

Blocks read their default copy from src/config/. Every default can be overridden with a prop on the page:

---
import Hero01 from "@/blocks/hero/Hero01.astro";
---

<!-- Uses the copy in src/config/blocks.ts -->
<Hero01 />

<!-- Same block, different heading on this page only -->
<Hero01 heading="Spring menu is here" />

Change the config to update a block everywhere it appears. Pass a prop for a one-off.

What it’s built with

Tool Used for
Astro 7 Pages, layouts, content collections, image optimization
Tailwind CSS v4 Styling, with the Forms and Typography plugins
Lucide Icons
TypeScript Config and helpers

Interactivity such as menus and accordions is plain JavaScript. There’s no React, Vue, or other framework to learn or ship.