Board

Overview

Use the Board component to publish roadmap-style layouts that help readers understand what is planned, what is in development, and what has already shipped. It works best when you need to communicate progress, timelines, or feature availability in a format that readers can scan quickly.

Common uses include:

• Product roadmaps
• Feature status pages
• Release planning
• API versioning status
• Deprecation timelines
• Platform capability overviews

A board contains one or more BoardColumn components, and each column contains self-closing BoardCard components. In the Web Editor, boards are interactive, so you can reorder columns and move cards between columns with drag and drop.

Using with Web Editor

Use the Web Editor when you want to build or update boards visually. It is the fastest way to add columns, rearrange cards, and adjust presentation without writing MDX.

Insert a board

Add a board from the slash menu:

Manage columns and cards

Once the board is on the page, you can update it directly in the editor.

• Reorder columns by dragging a column to a new position.
• Move cards between columns by dragging a card into another column.
• Add a column with the board's add-column control.
• Add cards within any column.
• Edit column settings to change the title, color, and icon.
• Edit card settings to change the title, description, icon, due date, and author.

These controls make boards useful for content that changes often, such as product roadmaps, feature status pages, or release timelines.

Using with Code Editor

Use the Code Editor when you want full control over the MDX structure or when you manage documentation in Git.

Basic syntax

A minimal board has a Board wrapper, one or more BoardColumn children, and self-closing BoardCard items inside each column.

<Board title="Product roadmap">
  <BoardColumn title="Planned" color="3" icon="check-circle">
    <BoardCard title="Webhook support" />
    <BoardCard title="Bulk export API" />
  </BoardColumn>
  <BoardColumn title="In Development" color="5" icon="play-circle">
    <BoardCard title="Dark mode" />
  </BoardColumn>
  <BoardColumn title="Shipped" color="4" icon="rocket">
    <BoardCard title="SSO with SAML" />
  </BoardColumn>
</Board>

Detailed example

Use card attributes when the roadmap needs more context than a title alone.

<Board title="API roadmap">
  <BoardColumn title="Planned" color="2" icon="settings">
    <BoardCard
      title="Version pinning"
      description="Let clients lock requests to a specific API version so updates do not change response shapes unexpectedly."
      icon="shield"
      author="Priya Shah"
      created-at="2025-01-10"
    />
    <BoardCard
      title="Deprecation headers"
      description="Add response headers that announce upcoming removals and link readers to migration guidance."
      icon="alert-triangle"
      due-date="2025-01-18"
      author="Marcus Lee"
    />
  </BoardColumn>
  <BoardColumn title="In development" color="6" icon="terminal">
    <BoardCard
      title="Bulk export endpoint"
      description="Export large record sets in a single job instead of paginating through thousands of API requests."
      icon="database"
      due-date="2025-01-22"
      author="Dana Kim"
      created-at="2025-01-14"
    />
  </BoardColumn>
  <BoardColumn title="Shipped" color="4" icon="check-circle">
    <BoardCard
      title="Webhook retries"
      description="Retry failed webhook deliveries automatically so transient outages do not cause missed events."
      icon="rocket"
      author="Alex Morgan"
      created-at="2025-01-08"
    />
  </BoardColumn>
</Board>

Attribute naming in MDX

Some board attributes use kebab-case in MDX.

Props and attributes reference

Board

Board is the top-level wrapper for the entire layout.

BoardColumn

BoardColumn defines a single column inside the board.

BoardCard

BoardCard is a self-closing component used inside a BoardColumn.

Column colors

Use the color attribute on BoardColumn to apply one of nine built-in color styles.

If you provide a color index above 8, the component wraps back through the palette.

Best practices and tips

A few patterns work especially well:

• Limit each board to a single organizing principle. Organize by delivery stage, such as planned, building, and shipped, or by time horizon, such as this quarter, next quarter, and future.
• Keep columns stable. Readers understand a roadmap faster when the column structure does not change often.
• Use icons sparingly. Icons help when they reinforce meaning, but too many icons make the board harder to scan.
• Prefer the Web Editor for frequent updates. It is faster for rearranging content and adjusting presentation.
• Use dates consistently. If one card shows due dates or created dates, consider applying the same pattern across similar cards.

What to use next