Components / Layout

Panel

The console's bordered surface, with an optional header for eyebrow, title, description and actions.

Extracted fromExplorer

Import

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

Examples

Panel with header

Selected network

Global

Worldwide · mainnet

Live
Chain ID
5031
Currency
SOMI
Block time
100 ms
Finality
< 500 ms
examples/panel/default.tsxShow code
tsx
import { Badge, KeyValues, Panel, PanelHeader } from "@somnia-chain/ui"

export default function PanelExample() {
  return (
    <Panel className="max-w-xl">
      <PanelHeader
        eyebrow="Selected network"
        title="Global"
        description="Worldwide · mainnet"
        action={<Badge tone="up">Live</Badge>}
      />
      <KeyValues
        items={[
          ["Chain ID", "5031"],
          ["Currency", "SOMI"],
          ["Block time", "100 ms"],
          ["Finality", "< 500 ms"],
        ]}
      />
    </Panel>
  )
}

Props

Panel

PropTypeDefaultDescription
...props<section> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <section>.

PanelHeader

PropTypeDefaultDescription
eyebrowReactNode—Mono label.
titleReactNode—Heading (h2).
descriptionReactNode—One line under the title.
actionReactNode—Right-hand controls.
...props<header> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <header>.