Usage
<Tiles cols={3}>
<Tile title="Quickstart" description="5-minute setup" href="/quickstart" icon="rocket" />
<Tile title="Components" description="30+ MDX components" href="/components/callout" icon="layers" />
<Tile title="API Reference" description="Complete REST API" href="/api/authentication" icon="code" />
</Tiles><Tiles> is a responsive grid of <Tile> cards. Each tile is centered, icon-first, and clickable as a single unit.
Tiles vs Cards
<Tiles> / <Tile> | <Card> / <CardGroup> | |
| Visual weight | Heavy — large icon plate, centered | Light — left-aligned, dense |
| Best for | Landing pages, "pick your starting point" | Feature grids, dense info |
| Required href | Yes | No (optional) |
| Description | Centered, smaller | Left-aligned |
Use Tiles when you have 3-6 high-level entry points and want each to feel like a poster. Use Cards when you have many items and want density.
4 tiles
<Tiles cols={4}>
<Tile title="Free" icon="user" href="/pricing" />
<Tile title="Pro" icon="zap" href="/pricing" />
<Tile title="Business" icon="trophy" href="/pricing" />
<Tile title="Enterprise" icon="shield" href="/pricing" />
</Tiles>Custom icon color
Override the default primary tint per tile:
<Tiles cols={3}>
<Tile title="Stable" icon="check" color="var(--docs-success)" href="/" />
<Tile title="Beta" icon="zap" color="var(--docs-warning)" href="/" />
<Tile title="Experimental" icon="sparkles" color="var(--docs-danger)" href="/" />
</Tiles>Props
Tiles
| Prop | Type | Default | Description |
cols | 2 | 3 | 4 | 3 | Number of columns on desktop |
children | ReactNode | required | One or more <Tile> |
Tile
| Prop | Type | Required | Description |
title | string | Yes | Tile heading |
href | string | Yes | Link destination |
description | string | No | Subtitle below the title |
icon | string | No | Lucide icon name or emoji |
color | string | No | Override the icon tint (CSS color or var) |