Unkey / Design

Layout

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

Basics

A simple page with a header and actions.

General

Manage your workspace settings.

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

export function BasicExample() {
  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.

General

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

export function SecondaryNavExample() {
  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 asChild active>
            <a href="#general">General</a>
          </SecondaryNavItem>
          <SecondaryNavItem asChild>
            <a href="#team">Team</a>
          </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.

Logs

Requests across your workspace.

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

export function FullWidthExample() {
  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>
  );
}