Market Session Row

Beta

Get Ritla UI

An exchange with its trading hours, an Open, Pre-open or Closed pill and a countdown.

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

market-session-row.tsx

import { MarketSessionRow } from "@/components/ui/market-session-row";<MarketSessionRow country="JO" name="Amman Stock Exchange" hours="10:00 to 12:30 local" status="open" statusLabel="Open" countdown="Closes in 2h 14m" />

API reference

MarketSessionRow

Prop	Type	Default	Description
`country`	`string`	None	ISO code: the flag.
`name / hours`	`ReactNode`	None	The exchange and its local trading hours.
`status`	`"open" \| "pre-open" \| "closed"`	None	Figma's Status.
`statusLabel`	`ReactNode`	None	The status in words, in the page language.
`countdown`	`ReactNode`	None	Time to the next open or close; the app updates it.

Accessibility

ARIA

The pill says the status in words; the dot and colour only repeat it.

Arabic and RTL notes

Mirrors

The flag moves to the right and the status to the left.

Does not mirror

Flags never mirror.

Numerals: Hours and countdowns are the app's text, in the reader's digits.
Arabic typography: label-14 Medium for the exchange, label-12 Medium in the pill.