Nextra Components

Nextra includes a variety of built-in components to make your docs more interactive and user-friendly.
Below are some commonly used components with examples you can copy and adapt.

Banner Component

A built-in component to show a banner on the top of the website. It can be used to show a warning or a notice.

Callout Component

This component helps you grab attention. You can use it to share a idea, warning or a important message.

Checkout the nextra documentation  for more on this.

Tabs

Use Tabs to show multiple code snippets or examples in one place.

// React Example
export default function App() {
  return <h1>Hello React!</h1>
}

<!-- Vue Example -->
<template>
  <h1>Hello Vue!</h1>
</template>

<!-- Svelte Example -->
<h1>Hello Svelte!</h1>

Code snippets

import { FileTree } from "nextra/components";
 
<FileTree>
  <FileTree.Folder name="content" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="contact.md" />
    <FileTree.File name="index.mdx" />
    <FileTree.Folder name="about">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="legal.md" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>;

Read the nextra documentation  for more information