# Text Row

> Label on the left, value and optional meta on the right.

- **Slug:** `text-row`
- **Kind:** atom · **Category:** Data
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/TextRow.tsx) (MIT)
- **Docs page:** https://viewership.ai/ui/components/text-row
- **All files in one bundle:** https://viewership.ai/ui/components/text-row.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/text-row.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy this file into `src/components/viewership/text-row/`:

   - `TextRow.astro` (raw: https://viewership.ai/ui/raw/text-row/TextRow.astro.txt)

npm packages: none.

## Usage

```astro
---
import TextRow from "../components/viewership/text-row/TextRow.astro";
---

<TextRow />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import TextRow from "./TextRow.astro";
---

<div class="card">
  <div class="head">
    <span class="title">Northwind · Week 41</span>
    <span class="sub">Report sent Mon, Oct 6</span>
  </div>
  <div class="rows">
    <TextRow label="Sessions" value="48,210" />
    <TextRow label="Conversions" value="1,204" meta="+8%" />
    <TextRow label="Ads ROAS" value="4.1x" meta="+0.3" />
    <TextRow label="AI citations">
      <span slot="value" class="score">37</span>
      <span slot="meta" class="up">+5</span>
    </TextRow>
  </div>
</div>

<style>
  .card {
    max-width: 360px;
    margin: 0 auto;
    padding: 14px 16px 4px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  .sub {
    font-size: 12px;
    color: var(--vs-ink-3);
  }
  .rows > :global(* + *) {
    border-top: 1px solid var(--vs-line);
  }
  .score {
    font-weight: 600;
  }
  .up {
    color: var(--vs-green);
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` |  | Label. Or use the label slot. |
| `value` | `string` |  | Value, tabular figures. Or use the value slot. |
| `meta` | `string` |  | Muted note, like a delta. Or use the meta slot. |

## Source

### `src/components/viewership/text-row/TextRow.astro`

```astro
---
/**
 * TextRow: label on the left, value and optional meta on the right.
 *
 * Ported from Beautiful UI `components/atoms/TextRow.tsx`
 * (MIT, © 2026 Shane Levine). Pass strings as props, or use the `label`,
 * `value` and `meta` slots. Rows draw no dividers; the parent does.
 *
 * @example
 * <TextRow label="Organic sessions" value="48,210" meta="+12%" />
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  label?: string;
  value?: string;
  meta?: string;
};

const { label, value, meta, class: className, ...rest } = Astro.props;
const hasMeta = meta !== undefined || Astro.slots.has("meta");
---

<div class:list={["vs-text-row", className]} {...rest}>
  <span class="vs-text-row__label"><slot name="label">{label}</slot></span>
  <span class="vs-text-row__end">
    <span class="vs-text-row__value"><slot name="value">{value}</slot></span>
    {hasMeta && <span class="vs-text-row__meta"><slot name="meta">{meta}</slot></span>}
  </span>
</div>

<style>
  .vs-text-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 8px 0;
    box-sizing: border-box;
  }
  .vs-text-row__label {
    font-size: 14px;
    color: var(--vs-ink-2);
  }
  .vs-text-row__end {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: right;
  }
  .vs-text-row__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--vs-ink);
    font-variant-numeric: tabular-nums;
  }
  .vs-text-row__meta {
    font-size: 13px;
    color: var(--vs-ink-3);
  }
</style>
```