blurrow/ui
data display

data list

labels and values, for describing one thing in detail.

status
published
author
ada lovelace
published
april 12, 2026
reading time
8 min

installation

new to blurrow? this sets up your project in one go: the package, the styles and the font. already done it? skip straight to usage. the installation page has the details.

bash
npx @blurrow/ui init
›rather own the code? copy the source instead

let the cli copy it, along with anything it needs:

bash
npx @blurrow/ui add data-list

or by hand: drop this file into components/ui and import from there.

components/ui/DataList.tsxtsx
import React from "react";


interface DataListItem {
  label: string;
  value: React.ReactNode;
}


interface DataListProps {
  items: DataListItem[];
  columns?: 1 | 2;
  className?: string;
}


export function DataList({ items, columns = 1, className = "" }: DataListProps) {
  return (
    <div
      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
    >
      <dl
        className={[
          // 1px gaps over a hairline-coloured face draw the grid lines, so
          // borders never double up whatever the item count
          "grid gap-px bg-neutral-900/[0.05] rounded-[13px] overflow-hidden",
          columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1",
        ].join(" ")}
        style={{ boxShadow: "var(--panel-face-shadow)" }}
      >
        {items.map((item, i) => (
          <div
            key={i}
            className={[
              "flex flex-col gap-1.5 px-5 py-4 bg-white",
              // An odd last cell in two columns spans the row instead of leaving a hole
              columns === 2 && items.length % 2 === 1 && i === items.length - 1 ? "sm:col-span-2" : "",
            ].join(" ")}
          >
            <dt className="text-[12px] text-neutral-500">
              {item.label}
            </dt>
            <dd className="min-h-6 flex items-center text-[14px] font-medium text-neutral-900 tracking-[-0.01em] tabular-nums">
              {item.value}
            </dd>
          </div>
        ))}
      </dl>
    </div>
  );
}

usage

tsx
import { DataList } from "@blurrow/ui";
tsx
<DataList items={[{ label: "author", value: "ada" }]} />

examples

two columns

plan
pro
seats
4 of 5
renews
nov 30, 2026
amount
$12 / month

props

straight from the source, so they're always up to date.

propsts
interface DataListItem {
  label: string;
  value: React.ReactNode;
}


interface DataListProps {
  items: DataListItem[];
  columns?: 1 | 2;
  className?: string;
}
previous←tablenextstat→