Widget Card

Beta

The one card for dashboards: a title with an icon, info and an action, a figure with its change, and a slot for any chart or list.

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 widget-card
Also works with shadcn: npx shadcn@latest add @ritla/widget-card
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

widget-card.tsx

import { Amount } from "@/components/ui/amount";import { WidgetCard, WidgetCardPeriod } from "@/components/ui/widget-card";<WidgetCard  icon={WalletIcon}  title="Total balance"  action={<WidgetCardPeriod>This month</WidgetCardPeriod>}  figure={{ value: <Amount value={2450.75} decimals={3} unit="JOD" size="xl" />, change: 12.4, caption: "vs last month" }}>  <BarChart data={data} series={series} label="Balance by month" /></WidgetCard>

Examples

States in the slot

EnglishMirroredArabic

Get the code

LTR →

API reference

WidgetCard

Prop	Type	Default	Description
`icon / title`	`IconComponent / ReactNode`	None	The 28px icon chip and the heading.
`info`	`ReactNode`	None	The Info tooltip next to the title.
`action`	`ReactNode`	None	Figma's Action: a WidgetCardPeriod, a Menu trigger or a link icon button.
`subtitle`	`ReactNode`	None	Figma's Show subtitle.
`figure`	`{ value, change?, caption? }`	None	Figma's Show figure: an Amount, a Trend badge and a caption.
`surface`	`"default" \| "muted"`	`"default"`	Default sits on a gray page, Muted on a white one.
`headingLevel`	`2 \| 3 \| 4`	`2`	The title's heading level.
`children`	`ReactNode`	None	Figma's Show slot: a chart, a list or a Card state.

WidgetCardPeriod

Prop	Type	Default	Description
`children`	`ReactNode`	None	The chosen period; pass it as `render` to a MenuTrigger.

Accessibility

ARIA

A section named by its heading, so it shows in the screen reader's list of regions.
Info is a button with a tooltip, reachable by keyboard.

Arabic and RTL notes

Mirrors

The header mirrors: icon and title on the right, the action on the left.

Does not mirror

The figure stays one left-to-right run; charts in the slot follow their own rules.

Numerals: The figure comes from Amount, so it follows the numerals setting.
Arabic typography: label-14 Semibold title, body-12 subtitle and caption.