WritedocsWritedocs

Tile

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

A card built around a preview image, on a patterned background - for a gallery of templates, themes or components. Lay tiles out in a CardGroup:

Card preview
Card component
Linkable cards with an icon or image.
Card preview
Without a link
A tile with no href.
<CardGroup cols={2}>
  <Tile href="/docs/content/components/card/" title="**Card** component" description="Linkable cards with an icon or image.">
    <img src="/images/card-demo.svg" alt="Card preview" />
  </Tile>
</CardGroup>

The preview is part of the tile, so clicking it never opens the image larger - a tile with href follows its link.

For a separate light and dark preview, put both images in the tile with className="block dark:hidden" and className="hidden dark:block" - only the one for the site’s theme shows.

Props

href string

Where the tile links to. Without it, the tile isn’t a link.

title string

Shown under the preview. Accepts code, **bold**, and *italic*.

description string

A short line under the title.