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:
npm install package-namepnpm add package-nameCallouts
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:
-
Install the package
Run your package manager install command in the terminal. -
Configure your project
Add the configuration settings to your root directory. -
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.