Astro Theme Lotus

Lotus is an installable documentation theme for Astro 7, Tailwind CSS 4, and MDX. It was built for projects that want a finished documentation experience without turning their entire Astro site into a fork of someone else’s starter.

The theme connects an Astro content collection to generated routes and supplies the surrounding shell: header, navigation, sidebar, table of contents, search, footer, theme controls, and responsive behavior.

The shell is the product

The shell remains mostly static. JavaScript is added where the interface needs state—mobile navigation, search, theme switching, or interactive content components—rather than hydrating the whole page.

Content collections define the boundary

A Lotus project registers docsLoader() and docsSchema() in src/content.config.ts. Documents then live in src/content/docs/, where frontmatter describes the page and Markdown or MDX contains the body.

import { defineCollection } from 'astro:content'
import { docsLoader, docsSchema } from '@prosefly/astro-theme-lotus/content'

const docs = defineCollection({
  loader: docsLoader(),
  schema: docsSchema(),
})

export const collections = { docs }

This is an important constraint: Lotus generates an interface around the collection, but the theme does not become the source of truth for the content.

Configuration replaces template surgery

Project identity and navigation live in theme.config.json. Teams can define the site name, logo, navigation groups, social links, search provider, localization, colors, and component overrides without editing package internals.

1. Start from the maintained Lotus starter or add the package to an existing Astro project.
2. Register the integration and docs collection.
3. Describe the shell in theme.config.json.
4. Write documentation in Markdown and MDX.

Explore the Lotus documentation, open the showcase, or browse the source.