Meta row

One quiet line of facts about a thing, separated by dots, with optional status chips at its end: the line under a title.

Web · ✓Mobile · ✓Desktop · ✓BetaData display

import { MetaRow } from "@krizaka/ui/meta-row";

HD 720p
9:16
0:05
24 fps
Oct 16, 2026
AI-generated

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Built for a product now paused (2026-10-25): kept until the next major's audit decides: the quiet line under a video's title — quality, shape, duration, date, and an AI badge.

When to use

Under a video's, an article's or a listing's title: quality, shape, duration, date.
When the facts are a few short values that read in one glance, with at most a status chip or two (“Encoding”, “AI-generated”).

When not to use

For facts that need a term beside their value, or more than a handful.Use instead: Description list
For a status alone.Use instead: Badge

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { MetaRow } from "@krizaka/ui/meta-row";

Examples

Under a video

Quality, shape, duration, frame rate and date, with an AI badge at the end.

HD 720p
9:16
0:05
24 fps
Oct 16, 2026
AI-generated

With a status

A chip after the facts while the video is still encoding.

0:05
Oct 16, 2026
Encoding

Props

Prop	Type	Default	Description
`items`required	`readonly ReactNode[]`	—	The facts, in reading order, already translated ("HD 720p", "9:16", "0:05"). Empty ones (`null`, `false`, "") are skipped.
`chips`	`readonly ReactNode[]`	`[]`	Status chips after the facts (a `Badge`, a `ChipLink`): not dot-separated, e.g. "Encoding" or "AI-generated".
`size`	`"sm" \| "md"`	—	sm (default) · md.

Accessibility

A real list (ul / li): the dots are aria-hidden, a screen reader hears “list, 5 items”. Give it aria-label when its subject is not obvious.
On a phone: a native list with the same items; the dots are decorative and hidden from the screen reader.

Keyboard

Keys	Action
`Tab`	The row is not a stop; only an interactive chip inside it is.

Best practices

Pass every fact translated and already formatted; skip a fact you do not know rather than showing a dash (empty values are dropped for you).
Keep it to five facts and one line on a phone; the line wraps, never scrolls.
Put only the exceptional on the chips (“Encoding” when it is not ready): a state that is always true is noise.
Detail beyond the line goes in a disclosure under it, not in more facts.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub