Prestige Shell

PrestigeShell is the main layout component for a Prestige site. It wraps your application with the shared documentation UI, including the header, main content area, and footer.

It also handles responsive layout behavior, light and dark theme support, and configuration for features such as GitHub links and integrated search.

Basic Setup

Add PrestigeShell to your root layout or root route, typically __root.tsx when using @tanstack/react-router.

Wrap the <Outlet /> (or equivalent content placeholder) with PrestigeShell:

import { Outlet, createRootRoute } from "@tanstack/react-router";
import { PrestigeShell } from "@lonik/prestige/ui";

export const Route = createRootRoute({
  component: () => (
    <PrestigeShell>
      <Outlet />
    </PrestigeShell>
  ),
});

This immediately applies the Prestige shell around your app content.

Configuration Options

Put serializable shell options such as github, algolia, and license into prestige.config.ts. Keep runtime options like customHeaderTitle, beforeHeaderLinks, afterHeaderLinks, and copyright on PrestigeShell.

import { defineConfig } from "@lonik/prestige/vite";

export default defineConfig({
  title: "Prestige",
  prestigeShellProps: {
    github: "https://github.com/lukonik/prestige",
    algolia: {
      appId: "YOUR_APP_ID",
      apiKey: "YOUR_SEARCH_API_KEY",
      indices: ["prestige_docs"],
    },
    license: {
      label: "MIT",
      url: "https://opensource.org/licenses/MIT",
    },
  },
  collections: [],
});

Pass runtime header and footer customizations through the options prop:

import { Outlet, createRootRoute } from "@tanstack/react-router";
import { PrestigeShell, type PrestigeShellProps } from "@lonik/prestige/ui";

const shellOptions: PrestigeShellProps = {
  beforeHeaderLinks: [{ to: "/changelog", label: "Changelog" }],
  copyright: () => <span>Built with Prestige</span>,
};

export const Route = createRootRoute({
  component: () => (
    <PrestigeShell options={shellOptions}>
      <Outlet />
    </PrestigeShell>
  ),
});

For the full API, see the Prestige Shell Reference.