Theme Default

Components

Block Tile

A link card for a ready-made block: its drawing on the sky grid, its name, and an arrow that nudges toward where it goes.

Beta

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 block-tile

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

Dependencies it brings: @phosphor-icons/react

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 { BlockTile } from "@/components/ui/block-tile";

<BlockTile block="checkout" href="/blocks/checkout">
  Checkout
</BlockTile>

API reference

BlockTile

Prop	Type	Default	Description
`block`	`BlockThumbnailName`	None	The block drawn in the thumb: one of the blocks that exist in code.
`children`	`ReactNode`	None	The block's name in the page's language: the link text.
`href / render`	`string / ReactElement`	None	Where it goes, or a router link (`<Link>`) that keeps its own element.
`onBand`	`boolean`	None	On the sky band: the deeper hard shadow, so it still reads.

BlockThumbnail

Prop	Type	Default	Description
`name`	`BlockThumbnailName`	None	The drawing alone, decorative, 220 by 124.

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`	To the tile, one link; it lifts and its arrow nudges as on hover.

ARIA

The tile is one link named by the block's name; the drawing is decorative and hidden.
Under reduced motion the tile does not rise and the arrow does not move; the shadow change stays.

Arabic and RTL notes

Mirrors

The whole drawing, the hard shadow (bottom-left), the lift toward the inline start, and the arrow and its nudge.

Does not mirror

Numbers and codes in the drawing; the verification code stays left to right.

Numerals: The drawing's numbers are Western in every mode, like the catalogue thumbnails.
Arabic typography: The name is body-16 Medium in the page's language font.