Rendering
Component library
The v1 MDX components Papervine ships — cards, tabs, steps, callouts, code groups, accordions, and frames.
The v1 MDX components Papervine ships — cards, tabs, steps, callouts, code groups, accordions, and frames.
Papervine ships a styled set of MDX components, resolved at compile time, matching the
established docs.json component set so real repos render unchanged. This page describes each v1 component and what
it is for. Because these docs render in Papervine itself, several are demonstrated inline.
Unknown components never crash a page — they degrade to their children. This page covers the supported set; see renderer internals for how the fallback works.
<Card> is a linkable panel with an optional icon and title; <CardGroup> arranges cards in
a responsive grid (cols). Use them for navigation hubs and feature overviews. (<Columns>
is the current name for the grid; <CardGroup> is the legacy alias.)
A card can wrap a link, turning the whole panel into a navigation target.
<CardGroup cols={2}> lays cards out in a grid that reflows on small screens.
<Tabs> with <Tab> children renders tabbed content — switch between alternative views
without leaving the page. Common for showing the same task in different languages or
platforms.
Install with npm install.
<Steps> with <Step> children renders a numbered walkthrough — sequential instructions
with automatic numbering and connecting rail. Use for setup guides and ordered procedures.
Point Papervine at a Git repo of MDX + docs.json.
Papervine copies the repo into object storage.
Your docs site is live.
Callouts highlight an aside with a colored panel and icon. Four variants ship in v1, each signaling a different intent:
<Note> — a neutral aside; supplementary information.<Info> — context or background worth knowing.<Tip> — a helpful suggestion or shortcut.<Warning> — something that can bite you; read before proceeding.<CodeGroup> wraps several code blocks into a single tabbed widget — one tab per block,
labeled by the block’s language (or title). Use it to present the same snippet across
languages or tools.
papervine dev ./docs
Individual code blocks get Shiki syntax highlighting (dual light/dark theme), a copy button, optional titles, and line highlights.
<Accordion> is a single collapsible disclosure; <AccordionGroup> stacks several so they
can share a section. Use them to hide secondary detail (FAQs, advanced options) until the
reader expands it.
<Frame> wraps an image or embed in a bordered container with an optional caption. Use it to
present screenshots and diagrams consistently, with framing and centering handled for you.
A fenced code block tagged mermaid renders as a diagram, not as highlighted code:
```mermaid
graph TD
Studio["Studio"] --> Project["Project"]
Project -->|has many| Asset["Asset"]
```
Which renders as:
The diagram is drawn in the browser and follows the page’s light/dark appearance — toggle the
theme and it redraws to match. Node labels may use simple inline HTML (<br/>, <i>); scripts
are stripped. A diagram that fails to parse falls back to showing its source, so a typo never
breaks the page.
Larger docs repos use more components — <ParamField> / <ResponseField> for API docs,
<Expandable>, <Update>, <Icon>, <Tooltip>, and others. Coverage expands over time;
until a component is implemented, it degrades gracefully to its children rather than failing
the page.