Add it to an existing app

The superlore plugin and CLI generate everything below for you. Reach for this only when you want to add superlore to an existing app. Every import comes from superlore — you never touch the renderer underneath.

Install the package

npm i superlore

Import the theme

Two lines in your global stylesheet — superlore bundles the base styles:

@import "tailwindcss";
@import "superlore/css";

Wire the components

// mdx-components.tsx
import { getMDXComponents } from "superlore";
export function useMDXComponents(components) {
  return getMDXComponents(components);
}

Define the content source

// source.config.ts
import { defineDocs, superloreFrontmatterSchema } from "superlore/config";
export const docs = defineDocs({
  dir: "content/docs",
  docs: { schema: superloreFrontmatterSchema.extend({ /* your fields */ }) },
});

// next.config.mjs
import { createMDX } from "superlore/next";
export default createMDX()({ reactStrictMode: true });

Load and render

Load your content with loader from superlore/source, then render with DocsLayout, DocsPage, and DocsBody from superlore/ui and RootProvider at the root.

Mount the MCP route

Expose the MCP over the same content so agents can read it — see Connect a client and the MCP tools.

Light and dark are equal

superlore ships both themes from one token set and defaults to the reader's system preference. Never branch on theme in your code — it's a pure CSS-token swap.