Key Value List · Sapphire UI

Pair concise labels with values. Use it for record details, account metadata and summaries that do not need table columns.

Examples

Details

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";

function KeyValueDetails() {
  return (
    <dl className="sp-key-value-list">
      <dt>Client</dt>
      <dd>Acme Holdings</dd>
      <dt>Engagement</dt>
      <dd>Cloud migration</dd>
      <dt>Owner</dt>
      <dd>
        <a href="#platform-team">Platform team</a>
      </dd>
    </dl>
  );
}

export default KeyValueDetails;

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

HTML API

CSS-only entry: use native HTML with these shared classes. There is no React component or React props API.

HTML parts
Class	Contract
`sp-key-value-list`	Shared styled HTML part

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";

Mixing package and vendored components? Follow application setup.