Components / Data

RowList

One row per item with a name on the left and detail on the right, e.g. partners or integrations.

Extracted fromExplorer

Import

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

Examples

Partners

Works with

Wallets

  • PrivyEmbedded wallets
  • LedgerHardware wallet support
  • ZerionWallet support
examples/row-list/default.tsxShow code
tsx
import { Panel, PanelHeader, RowList } from "@somnia-chain/ui"

export default function RowListExample() {
  return (
    <Panel className="max-w-md">
      <PanelHeader eyebrow="Works with" title="Wallets" />
      <RowList
        items={[
          { label: "Privy", detail: "Embedded wallets" },
          { label: "Ledger", detail: "Hardware wallet support" },
          { label: "Zerion", detail: "Wallet support" },
        ]}
      />
    </Panel>
  )
}

Props

RowList

PropTypeDefaultDescription
items{ label, detail }[]—Rows, in order.
...props<ul> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <ul>.