Overview

This page introduces the main concepts behind Prestige. Once you understand these pieces, the rest of the API will feel much more straightforward.

Content directory

Prestige reads documentation content from <root>/src/content. The @lonik/create-prestige scaffold creates this directory for you.

Anything outside src/content is ignored by Prestige's content pipeline.

Markdown pages

Each Markdown page has two parts:

• The content body, which Prestige compiles to HTML.
• The frontmatter object, which Prestige uses for page metadata and navigation labels.

For example, you can define a page title in frontmatter:

---
title: Overview
---

Supported Markdown formats

Prestige supports the following formats:

• MD, or standard Markdown
• MDX, which allows JSX inside Markdown link
• GFM, or GitHub Flavored Markdown link, which adds features such as tables

Use either the .md or .mdx file extension.

Collections

Prestige does not generate routes for every file inside src/content automatically. A page becomes part of the site only when it is referenced from a collection.

A collection maps a content directory to navigation and generated routes. For example, a docs collection reads from src/content/docs:

prestige({
  collections: [
    {
      id: "docs",
      items: [
        {
          label: "Introduction",
          slug: "docs/introduction",
        },
      ],
    },
  ],
});

If you then create src/content/docs/introduction.mdx, Prestige will generate a page at /docs/introduction.

---
title: Introduction
---

# Introduction

Welcome to Prestige.

Next, let's look at how Prestige turns that content into routes.

Generated (prestige) routes

Prestige follows TanStack Router's file-based routing model. It generates route files for your content inside src/routes/(prestige).

Content routes

For each content page, Prestige generates two files:

• docs.introduction.tsx
• docs.introduction.lazy.tsx

The resulting URL is /docs/introduction.

Collection routes

Each collection also gets its own layout route, which is responsible for collection-specific UI such as the sidebar and sibling navigation. In this example, the docs collection produces docs.lazy.tsx.

Statically analyzed routes

Generated Prestige routes are still regular TanStack Router routes, so you keep the usual benefits such as typed paths, prerendering support, and file-based route ergonomics.

Treat (prestige) as generated code

Do not edit the (prestige) directory manually. It is generated by the Prestige plugin and may be recreated at any time.

Adding manual routes inside a collection

You can still add your own routes outside the generated directory. If you want a manual route to appear inside a collection, create the file outside (prestige) using this naming pattern:

(prestige).docs.[name].tsx

Then add an external collection link for that route:

prestige({
  collections: [
    {
      id: "docs",
      items: [
        {
          label: "Custom Page",
          link: "/docs/custom-page",
        },
      ],
    },
  ],
});

Prestige Vite Plugin

The Prestige Vite plugin does the build-time work: it compiles content, builds sidebars, generates TanStack route files, and exposes the data used by the UI. Add it to your Vite plugins array and configure it as needed.

Prestige Shell

PrestigeShell is the main layout component for a Prestige site. It renders shared UI such as the header, search entry point, footer, and themed page shell. You typically mount it in your root route.

For the full list of props, see the Prestige Shell Reference.