Goal Tile

Beta

Get Ritla UI

A savings goal in a two-column grid: icon, name, saved of target and a progress bar.

Open in Figma

Preview

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

Installation

Add the component
$ npx ritla add goal-tile
Also works with shadcn: npx shadcn@latest add @ritla/goal-tile
Dependencies it brings
@phosphor-icons/react
Or copy by hand
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

goal-tile.tsx

import { GoalTile } from "@/components/ui/goal-tile";<GoalTile name="Dream car" detail="JOD 12,567 of 25,000" progress={50} progressLabel="50% saved" />

API reference

GoalTile

Prop	Type	Default	Description
`name / detail`	`ReactNode`	None	The goal and saved of target.
`progress`	`number`	None	0 to 100.
`progressLabel`	`string`	None	The progress in words.
`icon`	`IconComponent`	`TargetIcon`	The icon in the chip.
`href`	`string`	None	Makes the whole tile a link.

Accessibility

ARIA

The bar is a progress bar named by progressLabel.

Arabic and RTL notes

Mirrors

Content and the bar's fill start from the right.

Does not mirror

Amounts in the detail stay as the app writes them.

Numerals: Figures the app formats (prices, balances) arrive as text; the component keeps them left to right with <bdi dir="ltr">.
Arabic typography: label-14 Semibold name, body-12 detail.