Component gallery
Overview of Barodoc content components with when to use each
This page shows the main content components in one place. Use it to choose the right component and then open the linked page for full props and examples.
Callout
When to use: Notes, tips, warnings, and danger blocks in prose.
Tip
Prefer a single accent color and use callouts to draw attention where needed.
→ Callout
Card & CardGroup
When to use: Feature highlights, next-step links, or a grid of related pages.
→ Card
Steps
When to use: Numbered how-to guides (install, configure, run).
First step
Do this first.
Second step
Then do this.
Third step
Finally, verify.
→ Steps
Tabs
When to use: Switching between package managers, languages, or code variants.
npm install barodoc→ Tabs
Code group
When to use: Multiple code samples (e.g. same example in JS, Python, Go).
console.log("Hello");print("Hello")API reference
When to use: Documenting REST endpoints (method, path, params, responses).