---
title: Tile
description: Tiles display content previews with a styled pattern background and prominent image area, perfect for showcasing integrations, templates, or visual galleries.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Tiles display image-first previews with patterned backgrounds. Use them instead of Cards when a screenshot or logo matters more than text -- integration pages, template galleries, and visual showcases.

Use Tiles when:
- **Visual previews** are more important than text descriptions
- **Showcasing integrations** with logos or screenshots
- **Building galleries** of templates, themes, or examples
- **Displaying screenshots** with titles and optional descriptions

## Usage

```mdx
<Tile href="/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>
```

## Basic Tile

A simple tile with a preview image and title:

<Tile href="/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>

```mdx
<Tile href="/components/tabs" title="Tabs Component">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>
```

## Tile with Description

Add a description for more context:

<Tile href="/components/tabs" title="Tabs Component" description="Organize content into switchable tabbed sections">
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>

```mdx
<Tile
  href="/components/tabs"
  title="Tabs Component"
  description="Organize content into switchable tabbed sections"
>
  <img src="/images/tabs-preview.webp" alt="Tabs" />
</Tile>
```

## Tile vs Card

| Feature | Tile | Card |
|---------|------|------|
| Visual emphasis | Image-first with patterned background | Icon + title + description |
| Best for | Integrations, templates, galleries | Navigation, feature lists, CTAs |
| Image handling | Large preview area | Small icon |
| Text content | Title + optional description | Title + description + icon |

**Rule of thumb:** If you have a screenshot or logo to show, use Tile. If the content is primarily text-based, use Card.

## Grid Layout

Use `Columns` to display multiple Tiles in a grid:

<Columns cols={3}>
  <Tile href="https://slack.com" title="Slack">
    <img src="/images/tabs-preview.webp" alt="Slack" />
  </Tile>
  <Tile href="https://github.com" title="GitHub">
    <img src="/images/tabs-preview.webp" alt="GitHub" />
  </Tile>
  <Tile href="https://stripe.com" title="Stripe">
    <img src="/images/tabs-preview.webp" alt="Stripe" />
  </Tile>
</Columns>

## Dark Mode Images

Use Tailwind classes to show different images in light and dark modes:

```mdx
<Tile href="/customization/theming" title="Theming">
  <img src="/images/logo-light.webp" alt="Theme" class="dark:hidden" noStyle />
  <img src="/images/logo-dark.webp" alt="Theme" class="hidden dark:block" noStyle />
</Tile>
```

The `noStyle` attribute prevents default image styling so the dark mode classes work correctly.

## Props

<ParamField name="href" type="string" required>
  The URL the tile links to. Supports both internal paths (`/docs/intro`) and external URLs (`https://example.com`). External links open in a new tab.
</ParamField>

<ParamField name="title" type="string">
  Title text displayed below the preview area.
</ParamField>

<ParamField name="description" type="string">
  Optional description text below the title.
</ParamField>

<ParamField name="children" type="ReactNode">
  Content to display in the preview area. Typically images or SVGs.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>