Structure

Navigation

Directories

All themes follow a consistent directory structure and organizational philosophy to ensure clarity and ease of use.

The src directory is structured as follows:

Assets - All static resources used throughout the theme, such as images and icons
Components - Reusable code components available across the theme
Content - Content collection data, organized as markdown file directories or JSON/YAML files
Layouts - Files that define the structural templates for website pages
Pages - Files that generate routes for the website
Styles - All stylesheet files required by the theme

File Tree

Each theme has its own completed file tree structure in the README.md file.

/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/ 
│   │   ├── section-name/
│   │   ├── images/
│   │   └── icons/
│   ├── components/
│   │   ├── elements/ 
│   │   ├── global/ 
│   │   └── sections/ 
│   │       ├── section-name/
│   │       ├── section-name/
│   │       ├── home/
│   ├── content/ 
│   ├── layouts/ 
│   │   └── Layout.astro
│   ├── pages/ 
│   │   ├── blog/
│   │   │   ├── [...page].astro
│   │   │   └── [slug].astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├── privacy-policy.astro
│   ├── styles/
│   │   ├── global.css 
│   │   └── markdown.css 
│   └── content.config.ts
├── .gitignore
├── astro.config.ts
├── LICENSE
├── package-lock.json
├── README.md
└── tsconfig.json

Assets

This directory contains all static resources used throughout the theme, typically organized into subdirectories such as images and icons. In themes with a large number of images, assets are further subdivided by the page section in which they are used.

Components

Components are reusable code blocks that can be composed across the website. They are organized into three categories:

Global — Components rendered on every page as part of the layout structure (e.g., Header, Footer, NavBar)
Elements — Foundational building blocks used to compose larger components (e.g., Link, Text, Container, Heading)
Sections — Page-specific components, subcategorized by the page in which they appear

Content

The content directory holds all files containing data for content collections, as well as content for pages with substantial text. Files in this directory are typically written in Markdown, JSON, or YAML format.

Layouts

This directory contains the Astro template files that define the structural layout of each page. Every theme includes at least one primary layout. Certain themes may include additional layout files to accommodate pages with distinct structural requirements.

Pages

All website pages are defined in this directory. Each file corresponds to a route within the website. Pages associated with content collections make use of dynamic routing.

Styles

Astral Themes are styled using Tailwind CSS. This directory contains the following files:

global.css — Handles necessary imports and customization of the theme’s Tailwind configuration
markdown.css — Defines styles for the rendered body content of content collection Markdown files