PropertyList

Label/value rows for one record's properties, as a <dl>.

Status: Up
URL: api.example.com/health
Interval: 30 seconds
Owner: OwnerAna SouzaOn call this week · gets every alertBruno LimaPlatform team · alerts in business hoursNo ownerAlerts go to the team channel only
Escalation: No policy

View code

tsx

<PropertyList>
	<PropertyList.Item label="Status"><Badge color="success">Up</Badge></PropertyList.Item>
	<PropertyList.Item label="URL"><Link href="https://api.example.com/health">api.example.com/health</Link></PropertyList.Item>
	<PropertyList.Item label="Interval">30 seconds</PropertyList.Item>
	<PropertyList.Item
		label="Owner"
		edit={{ id: "edit-owner", label: "Edit owner", content: <OwnerForm /> }}
	>
		<Avatar size="sm">…</Avatar> Ana Souza
	</PropertyList.Item>
	<PropertyList.Item label="Escalation" empty="No policy" />
</PropertyList>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add property-list

Usage

typescript

import { PropertyList } from "@sdxc/ui";

Renders the <dl>. Each item is a <div> grouping one <dt> and one <dd>, which keeps the label/value pairing in the accessibility tree; the list measures itself as a container, so rows stack in a narrow side pane at any viewport width.

Composition

The parts the component publishes, each a static property of the host.

PropertyList
PropertyList.ItemRenders one property.

Examples

Tiles

Plan: Team, yearly
Monthly revenue: $1,240
Seats: 18 of 25
Open tickets: None

View code

tsx

<PropertyList variant="tiles">
	<PropertyList.Item label="Plan">Team, yearly</PropertyList.Item>
	<PropertyList.Item label="Monthly revenue">$1,240</PropertyList.Item>
	<PropertyList.Item label="Seats">18 of 25</PropertyList.Item>
	<PropertyList.Item label="Open tickets" empty="None" />
</PropertyList>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`variant`	`"rows" \| "tiles"`	No

Also accepts everything in TagProps<"dl">.

PropertyList.Item

Prop	Type	Required	Description
`label`	`RemixNode`	Yes	The property's name, rendered in the `<dt>`.
`empty`	`RemixNode`	No	What the row says when `children` is empty, such as "None" or "No reviews".
`edit`	`Edit`	No	Turns the value into a button opening an anchored edit popover.
`children`	`RemixNode`	No	The value: text, a link, a badge, an avatar with a name.

Also accepts everything in Omit<TagProps<"div">, "children">.

Types

Name	Values	What it decides
`Variant`	`"rows" \| "tiles"`	`"rows"` sets each label beside its value in a ruled-free column; `"tiles"` sets each property in its own bordered tile, two to a row, for a record's headline figures.