Components / Docs
DocsShell
Documentation chrome in the explorer's family look: a violet sidebar with the logo and the current section's pages, a top bar with a tab per section, search and the theme toggle, and a drawer on narrow screens. This site and the Somnia docs run on it.
OriginNew in the system
Import
tsx
import { DocsShell, activeSection } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { DocsShell, activeSection } from "@somnia-chain/ui/next"Usage
You're looking at it: this site runs on DocsShell. So does the Somnia docs site.
layout.tsx
tsx
// app/(docs)/layout.tsx
import { DocsSearch, DocsShell } from "@somnia-chain/ui/next" // reads the route, links with next/link
const SECTIONS = [
{
label: "Get started",
href: "/",
nav: [{ items: [{ href: "/", label: "Introduction" }, { href: "/network", label: "Network info" }] }],
},
{
label: "Data & Truth",
href: "/data/oracle",
match: ["/data"],
nav: [
{
label: "Somnia Oracle",
items: [
{ href: "/data/oracle", label: "Overview" },
{ href: "/data/oracle/ask", label: "Ask a question", items: [{ href: "/data/oracle/ask/templates", label: "Templates" }] },
],
},
],
},
]
export default function Layout({ children }) {
return (
<DocsShell badge="Docs" sections={SECTIONS} search={<DocsSearch entries={SEARCH} />}>
{children}
</DocsShell>
)
}Props
DocsShell