Tiles

Use tiles to create visual showcase elements with a patterned background, title, and description. Tiles are ideal for displaying component previews, feature highlights, or navigation items in a grid layout.

Accordion

Two variants

Tile example

<Tile href="/components/accordions" title="Accordion" description="Two variants">
  <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
  <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
</Tile>

Grid layout

Combine tiles with the columns component to create a responsive grid of visual previews.

Accordion

Two variants

Accordion

Two variants

Accordion

Two variants

Grid layout example

<Columns cols={3}>
  <Tile href="/components/accordions" title="Accordion" description="Two variants">
    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Two variants">
    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="Accordion" description="Two variants">
    <img src="/images/tiles/accordion-light.svg" alt="Accordion component preview" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="Accordion component preview (dark mode)" className="hidden dark:block" />
  </Tile>
</Columns>

Properties

href

string

required

URL to navigate to when users click the tile.

title

string

The title displayed below the tile preview.

description

string

A short description displayed below the title.

children

React.ReactNode

required

Content displayed inside the tile preview area, typically images or SVGs.

Tabs

Tooltips

Get started

Organize

Customize

Create content

Document APIs

Deploy

AI & agents

Optimize

Grid layout

Properties

​Grid layout

​Properties

Grid layout

Properties