Block Components

Verto ships a rich set of MDX components for building content beyond plain Markdown. Some are automatic upgrades to standard Markdown syntax — tables, blockquotes, code blocks, and inline code all get enhanced styling with zero extra effort. Others are custom JSX tags you write directly, from simple Callouts to documentation-grade Tabs, Steps, Cards, Accordions, and FileTrees. None require an import — they're registered globally in mdx-components.tsx.

Available Components

Callout

Highlighted admonition boxes. Three variants: info (default), warning, and tip.

Props:

• type (optional): 'info' | 'warning' | 'tip'. Defaults to 'info'.

<Callout>
This is an info callout. The default type.
</Callout>

<Callout type="warning">
Something the reader should be careful about.
</Callout>

<Callout type="tip">
A helpful suggestion.
</Callout>

Toggle

Collapsible content block. Click the title to expand or collapse.

Props:

• title (required): string displayed as the toggle header.

<Toggle title="Click to expand">
Hidden content goes here. Supports full Markdown inside.
</Toggle>

BookmarkCard

A styled link preview card. Useful for referencing external resources or other pages.

Props:

• url (required): the link URL.
• title (required): display title for the card.
• description (optional): short summary text.

<BookmarkCard
  url="https://github.com/tsaiggo/verto"
  title="Verto on GitHub"
  description="Source code and documentation."
/>

Figure

Image display with an optional caption underneath.

Props:

• src (required): image path or URL.
• alt (required): alt text for accessibility.
• caption (optional): caption displayed below the image.

<Figure
  src="/images/example.png"
  alt="Screenshot of the dashboard"
  caption="The main dashboard view."
/>

DiagramPlaceholder

A visual placeholder for diagrams that will be added later. Renders a styled box with title and optional description.

Props:

• title (required): name of the planned diagram.
• description (optional): what the diagram will show.

<DiagramPlaceholder
  title="Architecture Overview"
  description="Shows the MDX pipeline from content to static HTML."
/>

TaskList

Checkbox task lists using standard GFM syntax. No special JSX needed.

- [x] Write documentation
- [x] Add code examples
- [ ] Review and publish

Table

Standard Markdown pipe tables, automatically styled by Verto. No extra syntax required.

| Feature | Status |
|---------|--------|
| Dark mode | ✅ Shipped |
| Blog system | ✅ Shipped |
| Search | 🚧 Planned |

BlockquoteStyled

Standard Markdown blockquotes with enhanced styling. Just use the > prefix as usual.

> Good documentation is written for the reader, not the author.

CodeBlock

Fenced code blocks with a language tag get Shiki-powered syntax highlighting, a language label, and a copy-to-clipboard button. Highlighting is rendered at build time with dual light/dark themes, so there's zero client-side JavaScript.

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

For full details on supported languages and themes, see Syntax Highlighting.

InlineCode

Wrap text in backticks for styled inline code. Works exactly like standard Markdown.

Use the `npm run dev` command to start the dev server.

Beyond the core blocks above, Verto ships a small set of MDX components designed for documentation-style content.

Tabs

Use <Tabs> to group related variants — package managers, OS flavours, code dialects.

npm install verto

When id="install" is set, the active tab syncs with the URL hash — share …#install=pnpm and your reader lands on the right tab. Arrow keys navigate the tablist for accessibility.

Steps

<Steps> numbers heading-led blocks automatically. Pure CSS counter, zero JS:

npm run dev

Cards

Use <CardGroup cols={n}> to lay out multiple <Card> entries. Cards with href become clickable.

Accordion

Single panel, or grouped — pass exclusive to enforce one-open-at-a-time:

FileTree

For documentation that needs to show project layouts:

Related

• MDX Authoring for the full MDX writing guide
• Syntax Highlighting for code block details and supported languages
• Inline Comments — author asides with [^c-N] popups