Overview
The superlore component library — what each one is, when to use it, and how it looks.
Every component renders for humans and serializes to the MCP. Author once in MDX — every name
below is registered in superlore's MDX component map, so you drop it into any .mdx and it renders.
Components are tokens-only and light/dark co-equal — you never pick a colour or a size.
The primitives and editorial pieces give a page its shape and scannable spine. The structural components carry a typed knowledge face — an agent reads the data behind the picture, never the picture. Each one has its own page below.
Primitives
The Mintlify-compatible building blocks — emphasis, navigation, and layout. Inline and layout primitives are presentational by design and emit no knowledge node; callouts serialize a severity.
Callouts
Info, Tip, Check, Warning, Danger — interrupt the flow by intent.
Cards
Navigation tiles, grouped into a 1–4 column grid.
Columns
Place content side by side; collapses on mobile.
Steps
An ordered procedure or runbook, top to bottom.
Tabs
Alternative views of one thing — OS, language, package manager.
Accordions
Collapsible detail and FAQ-style content.
Tree
A file or hierarchy structure.
Frames
A bordered, captioned figure for screenshots.
Tiles
A preview tile with a hatched media area.
Icons
Inline lucide icons, with Font Awesome aliases.
Badge
Inline status chips with a broad colour set.
Pill
The editorial chip used across superlore pages.
Tooltips
A hover gloss on a term.
Editorial
The pieces that give a reference page its scannable spine. KeyFacts, StatGrid, and FeatureList also serialize to the knowledge face, so the facts at the top of a page are queryable, not just decorative.
KeyFacts
Label→value facts at the top of a reference.
StatGrid
Headline metrics in a card grid.
MetaBar
A thin inline strip of page metadata.
FeatureList
An itemized feature or link list.
Structural
The dual-representation differentiators — each renders a polished visual for humans and hands an agent the typed knowledge node behind it. This is the moat: one authored source, two faces.
Timeline
Dated, ordered events with status and typed refs.
EntityCard
A typed thing with fields and relations — the graph face.
DataTable
Typed columns and rows an agent can sort and compare.
Two faces, one source
The structural components carry a typed knowledge face — an agent reads the data behind the picture over the MCP. The primitives render for humans; callouts and the editorial pieces (KeyFacts, StatGrid, MetaBar, FeatureList) also serialize, but the inline and layout-only primitives intentionally emit no knowledge node, keeping the index free of presentational noise.
The full catalog
| Component | Category | When to use |
|---|---|---|
| Callout | Emphasis | Call out a caveat, tip, or warning |
| Card / CardGroup | Navigation | Link to related pages as a grid |
| Columns | Layout | Place content side by side |
| Steps | Layout | An ordered procedure or runbook |
| Tabs | Layout | Alternative views of one thing (OS, language) |
| Accordion | Layout | Collapsible detail or FAQ-style content |
| Tree | Layout | Show a file or hierarchy structure |
| Frame | Media | Frame an image or a preview tile |
| Tile | Media | A preview tile with a hatched backdrop |
| Icon | Inline | An inline lucide icon |
| Badge | Inline | A Mintlify-compatible status chip |
| Pill | Inline | The editorial status chip |
| Tooltip | Inline | A hover gloss on a term |
| KeyFacts | Editorial | Label→value facts at the top of a reference |
| StatGrid | Editorial | Headline metrics |
| MetaBar | Editorial | An inline strip of page metadata |
| FeatureList | Editorial | An itemized feature or link list |
| Timeline | Structural | Dated, ordered events with status |
| EntityCard | Structural | A typed thing with fields + relations |
| DataTable | Structural | Typed columns + rows an agent can sort |
| Canvas | Rich viz | A FigJam-style whiteboard / diagram from a spec |
Canvas lives on its own
Canvas — the interactive, FigJam-style whiteboard — is a structural component too, but it's
large enough to warrant its own top-level section. See Canvas for the shape
library, sections, typed edges, and the agent-native superlore-canvas authoring block.