Skip to content
Unkey Design Docs
Esc
↑↓navigate↵open⌘Jpreview
On this page

Layout

Examples of how to build effective page layouts on the Unkey dashboard.

Basics

A simple page with a header and actions.

import {
  Button,
  PageBody,
  PageContainer,
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
} from "@unkey/ui";

export default function BasicLayout() {
  return (
    <PageContainer>
      <PageHeader>
        <PageHeaderContent>
          <PageHeaderTitle>General</PageHeaderTitle>
          <PageHeaderDescription>Manage your workspace settings.</PageHeaderDescription>
        </PageHeaderContent>
        <PageHeaderActions>
          <Button variant="outline">Copy ID</Button>
        </PageHeaderActions>
      </PageHeader>
      <PageBody>
        <div className="mt-4 flex h-44 w-full items-center justify-center rounded-lg bg-grayA-3 font-mono text-gray-11 text-xs">
          Your content here
        </div>
      </PageBody>
    </PageContainer>
  );
}

Secondary navigation

Use a secondary navigation when pages have sections nested one level deep within them.

import {
  PageBody,
  PageContainer,
  PageHeader,
  PageHeaderContent,
  PageHeaderTitle,
  SecondaryNav,
  SecondaryNavGroup,
  SecondaryNavItem,
  SecondaryNavTitle,
} from "@unkey/ui";

export default function SecondaryNavLayout() {
  return (
    <div className="flex w-full flex-1 flex-col md:flex-row">
      <SecondaryNav aria-label="Settings" className="md:w-56">
        <SecondaryNavTitle>Settings</SecondaryNavTitle>
        <SecondaryNavGroup>
          <SecondaryNavItem href="#general" active>
            General
          </SecondaryNavItem>
          <SecondaryNavItem href="#team">Team</SecondaryNavItem>
        </SecondaryNavGroup>
      </SecondaryNav>
      <div className="min-w-0 flex-1">
        <PageContainer>
          <PageHeader>
            <PageHeaderContent>
              <PageHeaderTitle>General</PageHeaderTitle>
            </PageHeaderContent>
          </PageHeader>
          <PageBody>
            <div className="mt-4 flex h-48 w-full items-center justify-center rounded-lg bg-grayA-3 font-mono text-gray-11 text-xs">
              Your content here
            </div>
          </PageBody>
        </PageContainer>
      </div>
    </div>
  );
}

Add the rail in the section layout, then let each page render its own PageBody.

Full width

For full width pages like logs, requests, use the full width prop to let your page span the entire width of the viewport.

import {
  Button,
  PageBody,
  PageContainer,
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
} from "@unkey/ui";

export default function FullWidthLayout() {
  return (
    <PageContainer width="full">
      <PageHeader>
        <PageHeaderContent>
          <PageHeaderTitle>Logs</PageHeaderTitle>
          <PageHeaderDescription>Requests across your workspace.</PageHeaderDescription>
        </PageHeaderContent>
        <PageHeaderActions>
          <Button variant="outline">Refresh</Button>
        </PageHeaderActions>
      </PageHeader>
      <PageBody>
        <div className="flex h-52 w-full items-center justify-center bg-grayA-3 font-mono text-gray-11 text-xs">
          Your content here
        </div>
      </PageBody>
    </PageContainer>
  );
}