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

Customize the shell by passing an options object of type PrestigeShellProps.

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

const shellOptions: 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",
  },
};

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

For the full API, see the Prestige Shell Reference.