Data List

Data List shows the properties of a single thing, such as an account, an invoice or a deployment, as a description list. It suits detail panels, summary cards and side drawers.

Install

bashnpx shadcn@4.18.0 add @siteplane/data-list

Import it from @/siteplane/components/data-list. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Table: Pick Table when people compare, sort or select many records instead of reading one.
• vs Settings List: Pick Settings List when each row holds a control that changes a value.
• vs Native Table: Pick Native Table when the data has several columns per row rather than one label and one value.

Rules

• Compose DataList with one DataListItem per property, each holding a DataListLabel and a DataListValue so labels and values pair up for screen readers.
• Switch to orientation="vertical" in narrow columns or for long values.
• Set --data-list-label-width when several lists stack and their value columns should line up.
• Turn on dividers to separate rows with hairlines; inline parts such as Badge, Code or a link can sit in a value.
• Keep it read-only and stateless; it renders on the server and has no editing behaviour.

Reference

• Data List docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.