Theme Default

Components

Tile Group

Entry tiles in a ruled grid on a sky band: a headline, a line of supporting text and an arrow to the destination, with no cards or gaps between them.

Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry is coming soon. Until then, these are the commands you will run.

npx ritla add tile-group

Also works with shadcn: npx shadcn@latest add @ritla/tile-group

Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

import { ButtonCard } from "@/components/ui/button-card";
import { TileGroup } from "@/components/ui/tile-group";

<TileGroup label="Start here">
  <ButtonCard variant="tile" headline="Browse components" supportingText="Ready for both directions." render={<a href="/components" />} />
  <ButtonCard variant="tile" headline="Design in Figma" supportingText="The same tokens, on your canvas." render={<a href="/figma" />} />
  <ButtonCard variant="tile" headline="Scan your site free" supportingText="Find what mirroring leaves behind." render={<a href="/scan" />} />
</TileGroup>

Examples

Two columns, two rows

columns={2} with four tiles: a rule between the rows and between the tiles in a row. When narrow, one column with a rule above each tile after the first.

Get the code ›

API reference

TileGroup

The tiles are ButtonCard variant="tile", each a link.

Prop	Type	Default	Description
`label`	`string`	None	Names the group for screen readers (“Start here”). The group is a navigation landmark.
`columns`	`2 \| 3 \| 4`	`3`	Figma's Columns: the number of columns once the group is 768px wide, one column below that.
`children`	`ReactNode`	None	The tiles.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	From one tile to the next, in reading order.

ARIA

The group is a nav named by label; each tile is a link named by its headline and described by its supporting text.
The focus ring is drawn inside the tile, so the neighbouring tile never covers it.

Arabic and RTL notes

Mirrors

The first tile sits on the right, and the rules between tiles sit at their inline start.
The arrow at the start of the tile's foot points left and nudges that way on hover or focus.

Does not mirror

The rows still run top to bottom.

Numerals: The tile itself shows no digits; your text follows the numerals setting.
Arabic typography: Headline body-20 Medium, supporting text body-14.
Mixed-direction text: Headline and text in the page language; isolate Latin identifiers inside Arabic text.