Meta Line

An icon + text meta line under a record title — type, date and time, duration, owner — wrapping in the muted ink.

Video callSep 25 · 10:30 AM42mRecorded by Asha Kumar

Install

Add Meta Line from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/meta-line

Usage

import { MetaLine, MetaLineItem } from "@/components/ui/meta-line";

<MetaLine>
  <MetaLineItem icon={<Video />}>Video call</MetaLineItem>
  <MetaLineItem icon={<Calendar />}>
    <DateTime date={meeting.startedAt} variant="datetime" />
  </MetaLineItem>
  <MetaLineItem icon={<Clock />}>
    <Duration seconds={meeting.durationSeconds} />
  </MetaLineItem>
  <MetaLineItem icon={<Mic />}>Recorded by {meeting.recorder}</MetaLineItem>
</MetaLine>;

Anatomy

MetaLine — data-slot="meta-line"

MetaLineItem — data-slot="meta-line-item"

Examples

Record facts

The line under a record's title. Each fact is an optional 14px icon and its text, gap-x-4 between facts, in the muted ink one step below the title.

Video callSep 25 · 10:30 AM42mRecorded by Asha Kumar

Narrow container

Facts wrap to the next line as whole items; a long fact truncates rather than pushing the line wider than its container.

Video callSep 25 · 10:30 AM42mRecorded by Asha Kumar

API Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	`MetaLineItem`s.

Data attributes and CSS variables on MetaLine

Attribute	Values
`data-slot`	`"meta-line"`

MetaLineItem

Prop	Type	Default	Description
`icon`	`React.ReactNode`	—	A leading icon, drawn at 14px in the muted ink. Decorative: the text carries the meaning.

Data attributes and CSS variables on MetaLineItem

Attribute	Values
`data-slot`	`"meta-line-item"`

Accessibility

Icons are aria-hidden: the text of each fact carries its meaning, so write "42m" or "Recorded by Asha", never an icon alone.
The line is plain text with no interactive parts; put links or pickers next to it, not inside.

Contract	States tested
Behaviour	`default`, `with-icon`
Accessibility	`labeled`
Visual	`default`, `with-icon`

Do / Don't

Use MetaLine for three or four short facts directly under a record title.

Don't

Use it for labelled key/value details — that is PropertyList — or for status, which is StatusLine or a Badge.

On this page