Components
Oxidoc ships a set of built-in components you can use directly in .rdx files. Components use HTML-like syntax and can contain Markdown content.
Callout
Highlighted blocks for notes, warnings, tips, and errors.
| Prop | Type | Default | Description |
kind | String | "info" | Style: info, warning, error/danger, tip/success |
title | String | — | Header text |
collapsible | bool | false | Make the callout collapsible |
Info
This is an informational callout.
Tip
This is a helpful tip.
Warning
Something to be careful about.
Error
This highlights an error or danger.
Tabs
Switchable content panels. Selection persists via localStorage when a group is set.
| Prop | Type | Description |
group | String | localStorage key for persisting selection across pages |
Each Tab takes a title prop.
npm install my-package
yarn add my-package
pnpm add my-package
CodeBlock
Syntax-highlighted code with optional header and line highlighting.
| Prop | Type | Default | Description |
language | String | — | Language for syntax highlighting |
filename | String | — | Filename displayed in the header |
highlight | String | — | Line numbers to highlight (e.g., "2", "1,3-5") |
line_numbers | bool | false | Show line numbers |
Includes a copy-to-clipboard button.
fn main() { println!("Hello, Oxidoc!");}Accordion
Collapsible sections.
| Prop | Type | Default | Description |
title | String | — | Trigger text |
multiple | bool | false | Allow multiple items open simultaneously |
Click to expand
Hidden content goes here. You can put any content inside an accordion.
Another section
More hidden content.
CardGrid
Responsive grid of cards.
| Prop | Type | Default | Description |
columns | Number | 3 | Number of columns (1-6) |
Each Card supports:
| Prop | Type | Description |
title | String | Card title |
icon | String | Emoji or icon |
href | String | Makes the card a link |
Getting Started
Learn the basics of Oxidoc.
Components
Explore all available components.
Configuration
Customize your documentation site.
Steps
Numbered step-by-step instructions with a connecting line.
Each Step takes a title prop.
Install Oxidoc
Run the install script.
Initialize a project
Run oxidoc init my-docs.
Start writing
Create .rdx files and run oxidoc dev.
Badge
Inline status pill.
| Prop | Type | Default | Description |
variant | String | "info" | Color: info, tip, warning, danger, new, deprecated |
outline | bool | false | Outline style |
This feature is New in v0.1.0.
The old API is Deprecated.
Status: Stable Beta Experimental
Tooltip
Hover/focus popup for definitions.
| Prop | Type | Description |
text | String | Tooltip content |
Oxidoc uses WasmWebAssembly — a binary instruction format for stack-based virtual machines for interactive components.
Tag
Uppercase inline label for categorization.
| Prop | Type | Default | Description |
variant | String | "info" | Color: info, tip, warning, danger, new, experimental, deprecated |
new experimental deprecated
ThemedImage
Swaps images based on color scheme.
| Prop | Type | Description |
light | String | Image URL for light theme |
dark | String | Image URL for dark theme |
alt | String | Alt text |
width | String | Width |
height | String | Height |
Banner
Dismissible announcement bar.
| Prop | Type | Default | Description |
id | String | — | Unique ID for persistence |
persist | String | "none" | "none", "session", or "forever" |
dismissible | bool | true | Show close button |
Embed
Embed external content (iframe).
| Prop | Type | Description |
src | String | URL to embed |
width | String | Width |
height | String | Height |
Mermaid Diagrams
Use mermaid as the language for fenced code blocks:
graph LR
A[Write .rdx] --> B[oxidoc build]
B --> C[Static HTML]
B --> D[Wasm Islands]
C --> E[Deploy]
D --> E
No configuration needed — diagrams render automatically.
Landing Page Components
For Hero, FeatureGrid, Section, CTA, and other landing page components, see Landing Page Components.