---
title: "Interactive Components"
description: "You can enrich your documentation pages with built-in UI components to make content more engaging, readable, and structured. These interactive elements range from tabs and collapsible sections to v..."
last_updated: "2026-10-12T07:55:48.680136+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/interactive-components"
---

## Overview

You can enrich your documentation pages with built-in UI components to make content more engaging, readable, and structured. These interactive elements range from tabs and collapsible sections to visual callouts and step-by-step guides.

---

## Available Interactive Components

### Code Tabs

Use tabs to organize alternative views, package managers, or code samples within a single compact space. When writing Markdown, you can display code examples with language-specific syntax highlighting:

```bash
npm install package-name
```

```bash
pnpm add package-name
```

### Callouts

Callouts highlight important notes, warnings, or tips inside your documentation pages using standard Markdown alert blockquotes:

> [!NOTE]
> Useful context the reader should keep in mind.

> [!TIP]
> A helpful shortcut, best practice, or recommended approach.

> [!WARNING]
> A common pitfall, deprecation notice, or something that may cause unexpected behaviour.

> [!IMPORTANT]
> Information that is critical for the reader to understand.

### Step-by-Step Guides

Break down sequential instructions into numbered, easy-to-follow steps:

1. **Install the package**  
   Run your package manager install command in the terminal.

2. **Configure your project**  
   Add the configuration settings to your root directory.

3. **Verify the installation**  
   Start your local documentation server to preview your changes.

### Cards and Cross-References

To reference other documentation sections or related topics, link to them directly using page links such as Getting Started.

---

## Component Configuration Options

The following table summarizes options supported on code display blocks:

| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `allowCopy` | boolean | `true` | Enables or disables the quick-copy button on code blocks. |
| `keepBackground` | boolean | `false` | Preserves the original syntax highlighter background color. |
| `data-line-numbers` | boolean | `false` | Displays line numbers alongside your code snippet. |

> [!TIP]
> Use portable GitHub-Flavored Markdown syntax to ensure your content renders cleanly and reliably across all document parsers.

## Related

- [Content Authoring](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/content-authoring)
- [Customizing Layouts](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/how-to-guides/customizing-layouts)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.