Skip to content
Flight Manual

Component Library

Flight Manual provides a suite of premium, Mintlify-tier UI components built on top of Astro Starlight. These components allow you to create beautiful, interactive documentation out of the box.

Frame

Section titled “Frame”

The <Frame> component is used to elegantly display screenshots, images, or UI diagrams. It wraps the content in a beautiful, glassy border with a subtle shadow, providing a premium feel.

Abstract gradient
The Flight Manual cockpit architecture. 
import Frame from '@/components/docs/Frame.astro';


<Frame caption="The Flight Manual cockpit architecture.">
  <img src="/path/to/image.png" alt="Architecture diagram" />
</Frame>

Accordion Group

Section titled “Accordion Group”

The <AccordionGroup> and <Accordion> components are perfect for creating FAQs, troubleshooting guides, or hiding dense information until the user needs it.

🚀 How do I deploy Flight Manual?

Flight Manual is optimized for Cloudflare Pages. You can deploy it using the Wrangler CLI or by connecting your GitHub repository directly to the Cloudflare dashboard.

💰 Is there a cost to use this framework?

No! Flight Manual is 100% open-source and free forever. You can self-host it or deploy it to Cloudflare Pages (which has an incredibly generous free tier).

📦 Can I use this with my existing Zod schemas?

Yes! The Zod-to-MDX codegen pipeline is designed to read your existing backend Zod schemas and automatically generate your API reference documentation.

import AccordionGroup from '@/components/docs/AccordionGroup.astro';
import Accordion from '@/components/docs/Accordion.astro';


<AccordionGroup>
  <Accordion title="How do I deploy Flight Manual?" icon="🚀">
    Flight Manual is optimized for Cloudflare Pages...
  </Accordion>
  <Accordion title="Is there a cost to use this framework?" icon="💰">
    No! Flight Manual is 100% open-source...
  </Accordion>
</AccordionGroup>

Inline API Playground

Section titled “Inline API Playground”

The <InlinePlayground> component brings your tutorials to life. Instead of forcing users to navigate to a separate API Reference page, you can drop an interactive API tester directly into your MDX content. It executes real fetch requests from the browser!

POSThttps://jsonplaceholder.typicode.com/posts
Bearer Token
Body (JSON)
 
import { InlinePlayground } from '@/components/docs/InlinePlayground.tsx';


<InlinePlayground
  client:load
  method="POST"
  url="https://api.yourdomain.com/v1/users"
  defaultBody={`{
  "email": "[email protected]",
  "name": "Jane Doe"
}`}
/>