Getting Started

Fumadocs Looks For Starlight

Caution

This theme requires Tailwind CSS to be installed and configured in your project for components to render correctly.

Prerequisites

1. You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

2. Tailwind CSS must be installed and configured in your project. If you haven’t added it yet, run:

   npx astro add tailwind

Installation

1. starlight-fumadocs is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-fumadocs

   pnpm

   pnpm add starlight-fumadocs

   Yarn

   yarn add starlight-fumadocs

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightFumadocs from 'starlight-fumadocs'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightFumadocs()],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to preview the theme in action.

Acknowledgments

Thanks to Fuma Nama for creating Fumadocs, which served as the primary design inspiration and layout blueprint for this theme.

Special thanks to the creators of the Starlight plugins that provided the technical foundation for many features in this theme:

• Starlight Glide by raiz-toff
• Starlight Image Zoom, Astro D2, and generator-starlight-plugin by HiDeoo
• Starlight Codeblock Fullscreen by frostybee
• Starlight Copy Button by dionysuz