Component

MetaRow

Render small inline metadata groups with mono text and separators.

Usage

Import the component entry and start with its smallest complete example.

Import

import { MetaRow } from "@chitrank2050/monoline-ui/meta-row"

Basic usage

<MetaRow strong>
  <span>June 17, 2026</span>
  <MetaRow.Sep />
  <span>12 comments</span>
  <MetaRow.Sep />
  <span>4 mins</span>
</MetaRow>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

MetaRow keeps a byline, date, category, or reading time together on one responsive line.

Avoid when

The content is key-value data that needs explicit term and description relationships.

Accessibility

MetaRow adds no semantics beyond a div and hides its separators. Each child must carry the appropriate link, time, or text semantics.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

strongbooleanRenders text in the secondary text color instead of muted color

childrenReactNodeHorizontal elements separated by MetaRow.Sep delimiters

Implementation

The source used by the example above, including any state it needs.

import { MetaRow } from "@chitrank2050/monoline-ui/meta-row"

export function PostMeta() {
  return (
    <MetaRow>
      <span>June 17, 2026</span>
      <MetaRow.Sep />
      <span>By Chitrank</span>
      <MetaRow.Sep />
      <span>React 19 Reference</span>
    </MetaRow>
  )
}

Compare related components or review the package and theme setup.

01ComponentEyebrowComponent · ReferenceReference→02ComponentEditorial LineComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview