Shade

Shade is a high-contrast, monochrome documentation theme modeled on the shadcn/ui documentation template. It uses precise borders, compact controls, and neutral tones so code, API details, and navigation have a familiar shadcn-like treatment.

Documentation previews

Configure Shade

Set theme to "shade" in heyo-docs.config.ts. The mode setting defines the initial palette, while the reader's later choice is remembered by the application.

export default heyoDocs({  content: "content",  theme: "shade",  mode: "system",});

The official React Router, Next.js, and Astro integrations generate and load Shade's stylesheet from the selected theme automatically. To customize colors, radius, or typography, see Overriding styles.

Shade places group tabs and search in the header, keeping the sidebar dedicated to the current group's navigation. Its neutral palette and small radius follow the visual language of the shadcn template. Add token overrides when the project needs its own accent color or typography.