Key Value List

1"use client";
2
3import { KeyValueList } from "@/registry/ui";
4
5const metadata = [
6  { key: "Request ID", value: "req_9f2a2f1" },
7  { key: "Status", value: "Completed" },
8  { key: "Region", value: "eu-west-1" },
9  { key: "Duration", value: "421ms" },
10];
11
12export function KeyValueListDefaultExample() {
13  return (
14    <div className="mx-auto w-full max-w-2xl">
15      <KeyValueList items={metadata} />
16    </div>
17  );
18}

1"use client";
2
3import { KeyValueList } from "@/registry/ui";
4
5export function KeyValueListDenseExample() {
6  return (
7    <div className="mx-auto w-full max-w-2xl">
8      <KeyValueList
9        dense
10        items={[
11          { key: "Plan", value: "Pro" },
12          { key: "Seats", value: "12" },
13          { key: "Renewal", value: "2026-06-01" },
14        ]}
15      />
16    </div>
17  );
18}