Event Row

Beta

Get Ritla UI

A row of an economic calendar: the time, the country, the event with its forecast, impact bars and a reminder.

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

event-row.tsx

import { EventRow } from "@/components/ui/event-row";<EventRow time="14:30" country="US" title="US CPI (YoY)" details="Forecast 3.1%  Previous 3.2%" impact="high" impactLabel="High impact" />

API reference

EventRow

Prop	Type	Default	Description
`time / dateTime`	`string`	None	The local time, and its machine-readable value.
`country`	`string`	None	ISO code: the flag.
`title / details`	`ReactNode`	None	The event, and its forecast and previous.
`impact`	`"low" \| "medium" \| "high"`	`"low"`	Figma's Impact: one to three bars; High is red.
`impactLabel`	`string`	None	The impact in words, for screen readers.
`reminder`	`{ on, label, onToggle }`	None	The bell, a toggle button. Leave it out to hide it.

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
`EnterSpace`	Turns the reminder on or off.

ARIA

The bars are one image named by impactLabel, so the impact never depends on colour.
The bell is a toggle button (aria-pressed) with a 48px hit area.

Arabic and RTL notes

Mirrors

The time moves to the right and the bell to the left.

Does not mirror

The impact bars grow left to right like a signal meter; flags never mirror.

Numerals: Times and figures are formatted by the app; the time stays left to right.
Arabic typography: numeric-14 Medium for the time, label-14 Medium for the event.