Matrix logo

Cards

Create linked feature grids and navigation panels with Card and Columns components. Supports icons, descriptions, and click-through links.

Cards are visual containers for linking to other pages, highlighting features, or grouping related content.

Basic card

Getting Started

A simple card with a title and content.

<Card title="Getting Started">

  A simple card with a title and content.

</Card>

Card with icon

Documentation

Add a Font Awesome icon for visual emphasis.

<Card title="Documentation" icon="book">

  Add a Font Awesome icon for visual emphasis.

</Card>

Card with link

Quickstart Guide

Cards can link to other pages. Click to navigate.

<Card title="Quickstart Guide" icon="play" href="/quickstart">

  Cards can link to other pages.

</Card>

Card groups with Columns

Use Columns to arrange cards in a responsive grid:

MCP Overview

How Matrix uses MCP for its tool surface.

Agent Manifests

The manifest schema and field reference.

Tool Servers

The servers the default agent ships with.

Write a Bridge

Add a new MCP server to an agent.

<Columns cols={2}>
  <Card title="MCP Overview" icon="plug" href="/mcp/overview">

    How Matrix uses MCP for its tool surface.

</Card>
  <Card title="Agent Manifests" icon="file-code" href="/mcp/agent-manifests">

    The manifest schema and field reference.

</Card>
</Columns>

The cols prop accepts 2, 3, or 4 to control the grid layout.

Properties

stringrequired

The title displayed at the top of the card.

string

Font Awesome icon name (e.g., "book", "code", "rocket", "plug").

string

URL the card links to. Makes the entire card clickable.