Components

Tiles

Visual previews in a clickable grid.

Use Tile for navigation with a visual preview: a patterned thumbnail area plus a title and description. Arrange tiles with Columns or the Tiles grid wrapper.

<Columns cols={2}>
  <Tile href="/docs/components/card" title="Card" description="Summary cards">
    <img src="/preview-light.svg" alt="Card preview" className="block dark:hidden" />
    <img src="/preview-dark.svg" alt="Card preview" className="hidden dark:block" />
  </Tile>
</Columns>

Use light/dark image variants in the preview area for theme-aware thumbnails.

Properties#

Tile#

Name	Type	Description
hrefrequired	string	Destination when the tile is clicked.
title	ReactNode	Title below the preview.
description	ReactNode	Short description below the title.
childrenrequired	ReactNode	Preview content, typically images or SVGs.

Tiles#

Name	Type	Description
cols	1 \| 2 \| 3 \| 4	Number of columns in the grid. Default: 2
children	ReactNode	One or more `Tile` children.

Last updated on Sep 4, 2026

PreviousTabs NextTooltip