Tiles

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-reference/introduction" icon="code" />
</Tiles>

Quickstart

5-minute setup

Components

30+ MDX components

API Reference

Complete REST API

<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>

Free

Pro

Business

Enterprise

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>

Stable

Beta

Experimental

Props

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)