Components / Data

KeyValues

Label and value pairs in a grid, for contract details and chain parameters.

Extracted fromExplorer

Import

tsx
import { KeyValues } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { KeyValues } from "@somnia-chain/ui/next"

Examples

Three columns

Contract
0x0000…008A
Backing
frxUSD
Decimals
18
Supply
144.5M
Holders
21,904
Issuer
Frax
examples/key-values/default.tsxShow code
tsx
import { Addr, KeyValues, Panel } from "@somnia-chain/ui"

export default function KeyValuesExample() {
  return (
    <Panel className="max-w-2xl">
      <KeyValues
        cols={3}
        items={[
          ["Contract", <Addr key="c" value="0x0000000000000000000000000000000000008A" />],
          ["Backing", "frxUSD"],
          ["Decimals", "18"],
          ["Supply", "144.5M"],
          ["Holders", "21,904"],
          ["Issuer", "Frax"],
        ]}
      />
    </Panel>
  )
}

Props

KeyValues

PropTypeDefaultDescription
items[ReactNode, ReactNode][]—Label/value pairs.
cols1 | 2 | 3 | 42Columns.
...props<dl> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <dl>.