Prosefly themeBeautiful UIAccessible shellPageSpeed 100

Beautiful Astro docs, fast and accessible.

Lotus gives Astro developers a polished documentation shell with MDX, responsive navigation, search, i18n, dark mode, and design tokens. Your project stays in 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

On this page

Getting Started Copy

Overview

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

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

What Lotus includes

Docs shell

Responsive navigation and search.

Routing

Content-driven Astro pages.

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

Designed for documentation quality

Good-looking docs that stay accessible and fast.

Lotus pairs restrained visual defaults with semantic navigation, keyboard-friendly controls, and static-first output. The demo keeps external quality reports one click away without turning the homepage into a score dashboard.

Polished docs UI
Accessible navigation
Minimal client JavaScript

PageSpeed Insights100 / 100Performance, accessibility, best practices, and SEOCurrent mobile report for a Lotus docs page scores 100 across all PageSpeed 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