patterns

NotebookTabs

Notebook-style top tabs for product pages — rectangles separated by hairlines, the active tab drops its bottom border so it merges with the content. Composes with `<TabsContent>` from the Tabs primitive.

By default the tabs list breaks out of the AppShell main's `p-6` via negative margins so the rail hugs the container edges. Pass `bleed={false}` to skip the breakout.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/notebook-tabs.json

Or import from the workspace package:

import { NotebookTabs, NotebookTabsList, NotebookTab, TabsContent } from "@8maverik8/design";

Examples

Notebook tabs

Findings panel

<NotebookTabs defaultValue="findings">
  <NotebookTabsList bleed={false}>
    <NotebookTab value="findings" icon={Layers}>Findings</NotebookTab>
    <NotebookTab value="context" icon={Settings}>Context</NotebookTab>
  </NotebookTabsList>
  <TabsContent value="findings">Findings panel</TabsContent>
  <TabsContent value="context">Context panel</TabsContent>
</NotebookTabs>

Guidelines

Place NotebookTabs ABOVE the page title row — never below it.The tab bar partitions the page into sub-pages. Render order is: NotebookTabsList row first, THEN inside the active TabsContent place the DSPageShell with the title and headerActions, THEN the table. Putting tabs below the title splits the table page horizontally and breaks the canonical /list page rhythm.
Use this only at the top of a page where the tabs are the page's primary partition (Findings / Context / Settings).
Mix NotebookTabs and Tabs/`line` on the same page.Two tab styles is a sign the information architecture is wrong — one of them should be a sidebar item or a filter.
Render anything between the title row and the table inside a TabsContent panel.Same hard rule as DSPageShell — a table page is title row → table. NotebookTabs goes ABOVE the whole shell, not between sections.