Components / Layout
Section
A full-width band in one of the tones, with the page container inside. Tones redefine the semantic colors for their subtree, so everything inside just works.
Extracted fromMarketing site
Import
tsx
import { Section, SectionHeader } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Section, SectionHeader } from "@somnia-chain/ui/next"Examples
Tones with a SectionHeader
Three ways in
The same platform, wherever you work
The console, the CLI and the MCP server share one account and one set of actions.
Tone: ink
Dark in the dark theme, bright white in the light theme
Tone: violet
The brand band, the same in both themes
examples/section/default.tsxShow codeHide code
tsx
import { Button, Section, SectionHeader } from "@somnia-chain/ui"
export default function SectionExample() {
return (
<>
<Section tone="paper" className="py-14">
<SectionHeader
eyebrow="Three ways in"
title="The same platform, wherever you work"
lede="The console, the CLI and the MCP server share one account and one set of actions."
action={
<Button href="#" variant="secondary">
The Somnia Platform
</Button>
}
className="mb-0 md:mb-0"
/>
</Section>
<Section tone="ink" className="py-14">
<SectionHeader
eyebrow="Tone: ink"
title="Dark in the dark theme, bright white in the light theme"
className="mb-0 md:mb-0"
/>
</Section>
<Section tone="violet" className="py-14">
<SectionHeader eyebrow="Tone: violet" title="The brand band, the same in both themes" className="mb-0 md:mb-0" />
</Section>
</>
)
}Props
Section
SectionHeader