Prosefly themeAstro v7Tailwind CSS v4MDX

Build Astro documentation without rebuilding the shell.

Lotus provides docs routes, responsive navigation, search, MDX components, and design tokens. The rest of the Astro project stays under your control.

Get started View source

$pnpm add @prosefly/astro-theme-lotus

GuidesComponentsRecipesReferences

Getting Started Copy page

Overview

Learn what Lotus provides and how the documentation theme is organized.

Lotus provides the page shell, navigation model, theme tokens, and shared MDX components needed to start documentation without rebuilding the chrome from scratch.

What Lotus includes

Docs shell

Responsive navigation and search.

Routing

Content-driven Astro pages.

Live token previewView live docs

Mobile token previewLive docs

How Lotus works

One config, a docs collection, and generated routes.

Configure the shell once, write normal Markdown or MDX, and let the integration produce pages, Markdown source routes, and search data.

Configuretheme.config.json

{
  "$schema": "https://astro-theme-lotus.prosefly.dev/schema.json",
  "docsBase": "/docs",
  "appearance": {
    "accent": "indigo"
  }
}

Writesrc/content/docs/en

src/content/docs/en/index.mdx
src/content/docs/en/installation.mdx
src/content/docs/en/components/callout.mdx

Shipgenerated output

Read how content routing works

MDX components

Use real UI components inside Markdown.

Import components from @prosefly/astro-components. Install the package directly when you use them in your own MDX.

Callouts for important context
Synced package-manager tabs
Steps, cards, accordions, file trees, badges, and icons

Browse all components

MDX building blocksrendered components

Shared appearance tokens

Components respond to the same accent, gray scale, radius, and color mode as Lotus.

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

Steps

Cards

Accordions

appearance: {
  accent: 'indigo',
  gray: 'neutral',
  defaultMode: 'system',
  radius: 'medium',
}

Accent

Gray

Radius

Appearance

Change the theme from one configuration object.

Configure accent color, gray scale, radius, and the default color mode in the Lotus theme config. Font and lower-level semantic CSS tokens stay available for project styles and local components.

Customize the theme

Built for static docs

Fast, lightweight documentation by default.

Lotus keeps the docs shell static-first, with focused client JavaScript for navigation, search, and theme controls. External reports stay one click away without turning the homepage into a score dashboard.

Static output
Minimal client JavaScript
Deploy-friendly search

Mobile report100 / 100PageSpeed InsightsCurrent mobile report scores 100 across all categories.Open report External estimateLow impactWebsite CarbonExternal estimate for the installation page.Open report

Installation

Add Lotus to an existing Astro project.

Install the theme package, add theme.config.json, and register the docs content collection.

Read the installation guide

import { defineConfig } from 'astro/config';
import lotus from '@prosefly/astro-theme-lotus';

export default defineConfig({
  integrations: [lotus()],
});

Packages: @prosefly/astro-theme-lotus + @prosefly/astro-components
Content collection: docsLoader() + docsSchema()
Docs route: /docs on this site

The homepage remains a normal Astro route.

Open the docs View source