Property List

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a property list for the fields of one record in a detail panel or a drawer: a deal's owner, stage and value, a ticket's assignee and priority, a file's size and dates. Each row is an icon, a label and a value, and the value is any node. Helpers lay out the common kinds and format them in the app's locale. For many records side by side, use a data table. For a form people fill in from scratch, use Field.

import { BanknoteIcon, CircleDashedIcon, CircleUserIcon } from '@youj/icons'
import { PropertyList, PropertyListItem, PropertyMoney, PropertyPerson, PropertyStatus } from '@youj/react'

export function DealProperties({ deal }: { deal: Deal }) {
  return (
    <PropertyList>
      <PropertyListItem icon={<CircleUserIcon />} label="Owner">
        <PropertyPerson name={deal.owner.name} src={deal.owner.avatar} />
      </PropertyListItem>
      <PropertyListItem icon={<CircleDashedIcon />} label="Stage">
        <PropertyStatus tone="warning">Proposal</PropertyStatus>
      </PropertyListItem>
      <PropertyListItem icon={<BanknoteIcon />} label="Value">
        <PropertyMoney value={deal.value} currency="USD" />
      </PropertyListItem>
    </PropertyList>
  )
}

The label column is 9rem wide and every value starts after it. Set --property-label-width on the list (className="[--property-label-width:--spacing(28)]") for shorter or longer labels. A long value truncates on one line; PropertyText shows the full text on hover. When the list is narrower than 20rem, each label sits above its value.

Helper	Shows
`PropertyPerson`	an avatar (a photo, or the initials) and the name
`PropertyTag`	a quiet Badge; any Badge `variant` passes through
`PropertyStatus`	a colored dot and its label; `tone` is `neutral`, `accent`, `success`, `warning`, `danger` or a chart tone
`PropertyProgress`	a bar and its percent, named by the row's label
`PropertyDate`	a date in a `<time>`; `format` takes `Intl.DateTimeFormat` options
`PropertyMoney`	an amount in its `currency`, whole amounts without cents
`PropertyAge`	how long since `since`: "12 days", "3 months", "2 years"
`PropertyText`	text that truncates

Description

A deal's properties: owner, deal, industry, stage, probability, closing date, age, value and last editor, each with an icon and a label.

A narrow panel of short properties that keeps each label beside its value.

Below 20rem of its own width a property list stacks each label above its value. stack={false} keeps them side by side at any width: right for a narrow side panel of short values (a person, a status, a tag). Narrow the label column to fit with --property-label-width.

<PropertyList stack={false} className="[--property-label-width:5.5rem]">

Reference

Propsstack, icon, label, onEdit (4)

Props

PropertyList

PropertyList props
Prop	Type	Default
`stack`	`boolean` Below 20rem of its own width, each row stacks its label above its value. `false` keeps them side by side at any width. default true	`true`
Other props pass through: extends `ComponentProps<'dl'>`.

PropertyListItem

PropertyListItem props
Prop	Type	Default
`icon`	`ReactNode` The label's icon, drawn muted at 16px.	–
`label`Required	`string` What the value is: "Owner", "Stage".	–
`children`	`ReactNode` The value: text or one of the Property* helpers.	–
`onEdit`	`() => void` Shows an edit button on the row, named "Edit <label>".	–
Other props pass through: extends `ComponentProps<'div'>`.

PropertyList is a dl and takes its props. PropertyAge takes since and now; pass now from the server so the text is the same after hydration. PropertyDate, PropertyMoney and PropertyAge take locale, defaulting to the app's.

AccessibilityDescription list, edit buttons