Nextra templates

This page demonstrates the main Nextra built-in components so you can copy patterns into your docs.

Code

Nextra renders standard Markdown code: inline code with single backticks (e.g. like this) and fenced code blocks with triple backticks and an optional language.

Inline example: use the type prop for callout styling, or run pnpm build in the project root.

Block example:


const greeting = "Hello, Nextra!";
console.log(greeting);

With syntax highlighting (specify the language after the opening backticks):


pnpm add nextra nextra-theme-docs

Callouts

Callouts highlight important information. Use type for styling and optional emoji to override the default icon.

Default — Helpful advice for doing things better or more easily.

Info — Useful information that users should know, even when skimming content.

Warning — Urgent info that needs immediate user attention to avoid problems.

Error — Advises about risks or negative outcomes of certain actions.

Important — Key information users need to know to achieve their goal.

⭐

Custom emoji — You can pass any emoji (or React node) via the emoji prop.

Cards

Grouped cards with Cards and Cards.Card, and a single standalone card.

🏠Docs overview 🚀Getting started 🎨Templates

Single card (not grouped)

You can set num on Cards to control columns (e.g. num={2} for two columns).

Tabs

Tabs organize related content. Use items for labels and Tabs.Tab for each panel. Optionally set defaultIndex or storageKey to persist the selection.

Install

Install — e.g. pnpm add nextra nextra-theme-docs. Use the package manager of your choice.

Configure

Configure — Wrap your Next config with withNextra() and add the theme layout and styles.

Run

Run — Start the dev server and open /docs to see your Nextra-powered docs.

Steps

Wrap markdown headings (e.g. ###) with <Steps> to render a visual step list. Use HTML <h3> instead of ### if you want to hide steps from the table of contents.

First step

Do the first thing: install dependencies and open the project.

Second step

Do the second thing: create an MDX page under your docs route.

Third step

Do the third thing: use Nextra components like Callout, Cards, and Tabs.

FileTree

Use FileTree, FileTree.Folder, and FileTree.File to show a directory structure. Set defaultOpen on folders to expand them by default.

Bleed

Bleed lets content extend slightly (or fully) beyond the normal content width — useful for images, blockquotes, or embeds.

Bleed (default) — This block extends a bit past the container on both sides. Good for pull quotes or emphasis.

Full bleed — This variant goes to the edges of the viewport. Use for hero images or full-width code/embeds.

Table

Nextra’s Table components give you styled, non-markdown tables. Use Table, Table.Tr, Table.Th, and Table.Td for consistent docs styling.

Component	Purpose
Callout	Highlight important or contextual information
Cards	Link cards and grouped card grids
Tabs	Tabbed content with optional persistence
Steps	Numbered step-by-step instructions
FileTree	Collapsible file/folder trees
Bleed	Wide or full-bleed content
Table	Styled tables (this one)

All of these are exported from nextra/components. For layout components (Banner, Head, Search) and advanced ones (MDXRemote, Playground, TSDoc), see the Nextra built-ins docs .