Building with oks-ui

Build a layout

oks-ui doesn't ship an AppShell or force a page structure. It gives you the navigational and surface pieces; you arrange them with your own CSS.

An app shell in plain markup

A sidebar-plus-content shell is a CSS grid and two oks-ui pieces — Nav for the rail, PageTitle for the header.

import { Nav } from "oks-ui/nav";
import { PageTitle } from "oks-ui/page-title";

function AppShell({ children }) {
  return (
    <div className="grid min-h-screen grid-cols-[15rem_1fr]">
      <aside className="border-r border-[--oks-color-border] p-4">
        <Nav items={navItems} isItemActive={(i) => i.href === pathname} />
      </aside>
      <main className="p-8">
        <PageTitle as="h1" title="Overview" subtitle="Last 30 days" />
        {children}
      </main>
    </div>
  );
}

Resizable panes

For an email-style three-pane view or a master–detail split, use SplitLayout — the dividers are keyboard-resizable and panes collapse.

import { SplitLayout, SplitPane } from "oks-ui/split-layout";

<SplitLayout>
  <SplitPane defaultSize={280} minSize={220}>
    <ThreadList />
  </SplitPane>
  <SplitPane>
    <ThreadView />
  </SplitPane>
</SplitLayout>

Grouping content

Card is the surface primitive — header, body, footer, optional hover. Stat and Timeline compose inside it. See the analytics dashboard pattern for a full example.

Why no AppShell component

Page structure is where apps differ most — nav placement, header density, responsive breakpoints, whether the sidebar collapses. A prescriptive shell component either fights you or grows a hundred props. oks-ui gives you the navigational pieces and lets your layout be your layout.