Components

SuperDocs comes with a set of built-in components to make your documentation richer. These are available globally in all .mdx files — no imports needed.

Card

A simple card component for links or highlights.

<Card title="Getting Started" icon="🚀" href="/getting-started/installation">
  Learn how to install and configure SuperDocs.
</Card>

🚀

Getting Started

Learn how to install and configure SuperDocs.

Prop	Type	Description
`title`	`string`	The card title.
`icon`	`string`	Icon or emoji (optional).
`href`	`string`	URL to link to (optional). Makes the card clickable.

CardGroup

A layout component to display Cards in a responsive grid.

<CardGroup>
  <Card title="Installation" icon="📦" href="/getting-started/installation">
    Get up and running quickly.
  </Card>
  <Card title="Configuration" icon="⚙️" href="/reference/configuration">
    Customize your docs site.
  </Card>
</CardGroup>

📦

Installation

Get up and running quickly.

⚙️

Configuration

Customize your docs site.

Tabs

Organize content into switchable tabs.

<Tabs>
  <Tab title="npm">
    npm install superdocs
  </Tab>
  <Tab title="yarn">
    yarn add superdocs
  </Tab>
  <Tab title="pnpm">
    pnpm add superdocs
  </Tab>
</Tabs>

npm install superdocs

yarn add superdocs

pnpm add superdocs

Accordion

Collapsible content sections for FAQs or optional details.

<Accordion title="What is SuperDocs?" icon="❓">
  SuperDocs is an open-source documentation generator built on Astro.
</Accordion>

<Accordion title="Is SuperDocs free?" defaultOpen>
  Yes! SuperDocs is completely free and open-source.
</Accordion>

❓ What is SuperDocs?

SuperDocs is an open-source documentation generator built on Astro.

Is SuperDocs free?

Yes! SuperDocs is completely free and open-source.

Prop	Type	Default	Description
`title`	`string`	-	The accordion header text.
`icon`	`string`	-	Optional icon/emoji.
`defaultOpen`	`boolean`	`false`	Whether the accordion starts expanded.

Steps

Display numbered step-by-step instructions.

<Steps>
  <Step title="Install SuperDocs">
    Run `npx superdocs create my-docs` to create a new project.
  </Step>
  <Step title="Configure">
    Edit the `docs-config.json` file to customize your site.
  </Step>
  <Step title="Deploy">
    Push to GitHub and deploy with Vercel or Netlify.
  </Step>
</Steps>

Install SuperDocs

Run npx superdocs create my-docs to create a new project.

Configure

Edit the docs-config.json file to customize your site.

Deploy

Push to GitHub and deploy with Vercel or Netlify.

Component	Prop	Type	Description
`Steps`	-	-	Container for Step items.
`Step`	`title`	`string`	Optional step title.

Callout

Enhanced alerts/admonitions with different types.

<Callout type="note" title="Note">
  This is a note callout with helpful information.
</Callout>

<Callout type="tip">
  Pro tip: Use callouts to highlight important info!
</Callout>

<Callout type="warning" title="Warning">
  Be careful with this operation.
</Callout>

Note

This is a note callout with helpful information.

Tip

Pro tip: Use callouts to highlight important info!

Warning

Be careful with this operation.

Danger

This is a danger callout for critical warnings.

Prop	Type	Options	Description
`type`	`string`	`note`, `tip`, `info`, `warning`, `danger`, `check`	The callout type.
`title`	`string`	-	Override the default title.
`icon`	`string`	-	Override the default icon.

CodeGroup

Tabbed code blocks for showing code in multiple languages. Use the title attribute on code blocks to set tab names.

<CodeGroup>
  ```bash title="npm"
  npm install superdocs
  ```
  ```bash title="yarn"
  yarn add superdocs
  ```
</CodeGroup>

Tip

Add title="Tab Name" to your code blocks to customize the tab labels.

Badge

Inline status badges for labeling content.

<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Deprecated</Badge>
<Badge variant="info">Beta</Badge>

Default Success Warning Deprecated Beta

Prop	Type	Options	Description
`variant`	`string`	`default`, `success`, `warning`, `danger`, `info`	Badge color variant.

Hover tooltips for additional context.

The <Tooltip content="Application Programming Interface">API</Tooltip> is well documented.

The API Application Programming Interface is well documented.

Prop	Type	Description
`content`	`string`	The tooltip text shown on hover.

Frame

A styled container for images or videos with optional captions.

<Frame caption="Architecture diagram">
  <img src="/architecture.png" alt="Architecture" />
</Frame>

Prop	Type	Description
`caption`	`string`	Caption text displayed below the content.

Columns

Create multi-column layouts.

<Columns cols={2}>
  <Column>
    **Left Column**

    Content for the left side.
  </Column>
  <Column>
    **Right Column**

    Content for the right side.
  </Column>
</Columns>

Left Column

Content for the left side.

Right Column

Content for the right side.

Component	Prop	Type	Options	Description
`Columns`	`cols`	`number`	`2`, `3`, `4`	Number of columns (default: 2).
`Column`	-	-	-	Individual column container.

GitHub-Style Alerts

SuperDocs also supports GitHub-style blockquote alerts:

> [!NOTE]
> This is a note.

> [!TIP]
> This is a helpful tip.

> [!IMPORTANT]
> Critical information here.

> [!WARNING]
> Be careful!

> [!CAUTION]
> Potential danger ahead.

Note

This is a note.

Tip

This is a helpful tip.

Important

Critical information here.

Warning

Be careful!

Caution

Potential danger ahead.

Icon

Display icons from multiple icon sets powered by Iconify. Available globally in all MDX files.

Basic Usage

<Icon name="lucide:rocket" />
<Icon name="heroicons:home" size={24} />
<Icon name="mdi:github" class="text-primary-500" />

lucide:rocket

heroicons:home

mdi:github

fa6-brands:twitter

Available Icon Sets

Icon Set	Prefix	Description
Lucide	`lucide:`	Clean, consistent stroke icons (recommended)
Heroicons	`heroicons:`	Beautiful hand-crafted icons by Tailwind
Material Design Icons	`mdi:`	Google’s Material Design icon set
Font Awesome Solid	`fa6-solid:`	Font Awesome 6 solid icons
Font Awesome Brands	`fa6-brands:`	Font Awesome 6 brand icons

Props

Prop	Type	Default	Description
`name`	`string`	-	Icon name in `set:icon-name` format.
`size`	`number \| string`	`24`	Icon width and height in pixels.
`class`	`string`	-	Additional CSS classes.
`aria-hidden`	`boolean`	`true`	Hide from screen readers.

Sidebar groups automatically get icons based on their label. You can also specify custom icons in your navigation config:

Group Label	Default Icon
Getting Started	`lucide:rocket`
Introduction	`lucide:book-open`
Guides	`lucide:compass`
Concepts	`lucide:lightbulb`
Reference	`lucide:file-code`
API	`lucide:code`
Components	`lucide:puzzle`
Examples	`lucide:folder-open`
Tutorials	`lucide:graduation-cap`
Configuration	`lucide:settings`
Deployment	`lucide:cloud-upload`
Troubleshooting	`lucide:bug`
FAQ	`lucide:help-circle`
Changelog	`lucide:history`
Resources	`lucide:library`

Finding Icons

Browse all available icons at icon-sets.iconify.design. Search for any icon, then use it with the format set-name:icon-name.

API Documentation Components

For documenting APIs, see the dedicated API Reference page which covers:

APIEndpoint - Display API endpoints with method badges
APIPlayground - Interactive API testing
ParamTable / Param - Parameter documentation
ResponseField - Response field documentation

SuperDocs Demo

Components

Card

Getting Started

CardGroup

Installation

Configuration

Tabs

Accordion

Steps

Install SuperDocs

Configure

Deploy

Callout

CodeGroup

Badge

Tooltip

Frame

Columns

GitHub-Style Alerts

Icon

Basic Usage

Available Icon Sets

Props

Sidebar Icons

Finding Icons

API Documentation Components