Attributes rail

Pro

A record's key/value facts as a definition list: label left, value right, hairline-separated. Long values wrap; rich values (a chip, a link) are fine. A value that isn't known shows as such, not as a blank.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/attributes-rail

Brings in: locale, utils

Usage

TSX · The example above

"use client"

import { AttributesRail } from "@/components/attributes-rail"

export default function Example() {
  return (
    <div className="max-w-sm rounded-xl border bg-card p-4">
      <p className="text-sm font-semibold">0142_add_region_to_projects</p>
      <AttributesRail
        className="mt-2"
        items={[
          { label: "Kind", value: "Migration" },
          { label: "Repository", value: <code className="font-mono text-xs">acme/api</code> },
          { label: "Applied to", value: "Staging" },
          { label: "Rows touched", value: "18,240" },
          { label: "Reversible", value: "Yes, with 0142_down" },
          { label: "Reviewed by", value: null },
        ]}
      />
    </div>
  )
}

<AttributesRail>

Prop	Type	Default	Description
itemsrequired	`{ label: string; value: React.ReactNode \| null }[]`	—	The facts, in order. A null, undefined or empty value shows as "Not known".
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under attributesRail in <LocaleProvider strings={{ … }}>; the table is exported as attributesRailStrings.

Key	English
empty	No attributes.
notKnown	Not known