Components / Content

FeatureGrid

Feature cells in a hairline grid. comfortable is the marketing size, with bullet points and whole-cell links; compact is the console size, numbered on a rounded surface.

Extracted fromMarketing siteExplorer

Import

tsx

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

Examples

Comfortable

One engine

Spot, perpetual and event markets share one matching engine and one liquidity root.

Onchain order books
Shared liquidity

One SDK

Create a venue, list markets and route orders with the same client.

Learn more 03

Receipts

Every fill, oracle answer and agent call is verifiable onchain.

Learn more

examples/feature-grid/comfortable.tsxShow code

tsx

import { FeatureGrid } from "@somnia-chain/ui"

export default function FeatureGridComfortable() {
  return (
    <FeatureGrid
      numbered
      items={[
        {
          title: "One engine",
          body: "Spot, perpetual and event markets share one matching engine and one liquidity root.",
          points: ["Onchain order books", "Shared liquidity"],
        },
        {
          title: "One SDK",
          body: "Create a venue, list markets and route orders with the same client.",
          href: "#",
        },
        {
          title: "Receipts",
          body: "Every fill, oracle answer and agent call is verifiable onchain.",
          href: "https://docs.somnia.network",
        },
      ]}
    />
  )
}

Compact

Shielded pools

Deposit into a shared pool, then transact privately.

Proofs

Withdraw with a zero-knowledge proof of membership.

Compliance

Association sets keep illicit funds out of the pool.

Any venue

Venues settle private balances like any other.

examples/feature-grid/compact.tsxShow code

tsx

import { FeatureGrid } from "@somnia-chain/ui"

export default function FeatureGridCompact() {
  return (
    <FeatureGrid
      density="compact"
      cols={4}
      items={[
        { title: "Shielded pools", body: "Deposit into a shared pool, then transact privately." },
        { title: "Proofs", body: "Withdraw with a zero-knowledge proof of membership." },
        { title: "Compliance", body: "Association sets keep illicit funds out of the pool." },
        { title: "Any venue", body: "Venues settle private balances like any other." },
      ]}
    />
  )
}

Props

FeatureGrid

Prop	Type	Default	Description
items	{ title, body, points?, href? }[]	—	Cells.
cols	2 \| 3 \| 4	3	Columns at the widest breakpoint.
density	"comfortable" \| "compact"	"comfortable"	Marketing or console size.
numbered	boolean	true when compact	01, 02, … above each title.
linkAs	LinkComponent	<a>	Component for internal links. @somnia-chain/ui/next sets it to next/link.