Frame

Neutral well with an elevated white panel. Wraps lists with columns and tables.

Flush

The default. A neutral-100 well with a 17px radius, and the panel meets its edges. FramePanel is the white shadow-sm surface inside it, at 16px. FrameHeader holds one title and an optional description.

Call routing

Where inbound calls go when Nova is busy.

Forward to the support queue

Callers wait up to 2 minutes before voicemail.

import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@smallest-inc/ui";

export default function FrameFlush() {
  return (
    <Frame>
      <FrameHeader>
        <FrameTitle>Call routing</FrameTitle>
        <FrameDescription>Where inbound calls go when Nova is busy.</FrameDescription>
      </FrameHeader>
      <FramePanel className="p-4">
        <p className="text-sm font-medium text-fg">Forward to the support queue</p>
        <p className="mt-1 text-sm text-fg-secondary">Callers wait up to 2 minutes before voicemail.</p>
      </FramePanel>
    </Frame>
  );
}

Thin

A 4px inset around the panel with a 20px outer radius, so the curves stay concentric. Used for chart cards and docs examples.

Latency

0.14s

Median time to first word, last 24 hours

import { Frame, FrameHeader, FramePanel, FrameTitle } from "@smallest-inc/ui";

export default function FrameThin() {
  return (
    <Frame variant="thin">
      <FrameHeader className="py-2">
        <FrameTitle>Latency</FrameTitle>
      </FrameHeader>
      <FramePanel className="p-4">
        <p className="text-2xl font-medium text-fg">0.14s</p>
        <p className="mt-1 text-sm text-fg-secondary">Median time to first word, last 24 hours</p>
      </FramePanel>
    </Frame>
  );
}

Footer

Use thin. FrameFooter sits in the well below the panel for secondary text and a quiet action.

Recording retention

How long call recordings are stored.

Recordings are kept for 90 days, then deleted.

import {
  Button,
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@smallest-inc/ui";

export default function FrameWithFooter() {
  return (
    <Frame variant="thin">
      <FrameHeader>
        <FrameTitle>Recording retention</FrameTitle>
        <FrameDescription>How long call recordings are stored.</FrameDescription>
      </FrameHeader>
      <FramePanel className="p-4">
        <p className="text-sm text-fg">Recordings are kept for 90 days, then deleted.</p>
      </FramePanel>
      <FrameFooter className="justify-between">
        Applies to all agents in this workspace.
        <Button variant="tertiary" size="sm">
          Change
        </Button>
      </FrameFooter>
    </Frame>
  );
}

Separated panels

Use thin: its 4px gap separates the panels that share one well.

Phone numbers

+1 (415) 555-0198

Linked to Nova Sales Assistant

+44 20 7946 0958

Linked to Orbit Retention Bot

import { Frame, FrameHeader, FramePanel, FrameTitle } from "@smallest-inc/ui";

export default function FramePanels() {
  return (
    <Frame variant="thin">
      <FrameHeader>
        <FrameTitle>Phone numbers</FrameTitle>
      </FrameHeader>
      <FramePanel className="p-4">
        <p className="text-sm font-medium text-fg">+1 (415) 555-0198</p>
        <p className="mt-1 text-sm text-fg-secondary">Linked to Nova Sales Assistant</p>
      </FramePanel>
      <FramePanel className="p-4">
        <p className="text-sm font-medium text-fg">+44 20 7946 0958</p>
        <p className="mt-1 text-sm text-fg-secondary">Linked to Orbit Retention Bot</p>
      </FramePanel>
    </Frame>
  );
}

With a list

ListColumns is a flush Frame with a 1px inset. Column labels sit in the well and the List is the panel.

RoleAccess

Owner
Full
Admin
Full
Member
Limited

import {
  Entity,
  EntityContent,
  EntityMedia,
  List,
  ListColumns,
  ListHeader,
  ListItem,
} from "@smallest-inc/ui";

const roles = [
  { role: "Owner", access: "Full" },
  { role: "Admin", access: "Full" },
  { role: "Member", access: "Limited" },
];

export default function FrameWithList() {
  return (
    <ListColumns>
      <ListHeader weight="medium">
        <span className="min-w-0 flex-1">Role</span>
        <span className="w-24 text-right">Access</span>
      </ListHeader>
      <List>
        {roles.map(({ role, access }) => (
          <ListItem key={role} density="compact">
            <Entity>
              <EntityMedia size="sm" />
              <EntityContent title={role} />
              <span className="w-24 text-right text-sm text-fg-secondary">{access}</span>
            </Entity>
          </ListItem>
        ))}
      </List>
    </ListColumns>
  );
}

Best practices

When to use

Use to group related content: a neutral-100 well with one or more white FramePanels.
Use default (17px well, 16px panel, flush) for lists with columns, tables and settings sections. Use thin (4px inset, 20px outer radius) for chart cards and compact framed surfaces.

Behavior

Frame is the well; FramePanel is the white shadow-sm surface. Put at most one FrameTitle in each Frame, in FrameHeader.
FrameFooter sits in the well below the panel for secondary text and one quiet action (tertiary sm button).
Add gap-1 on Frame when several panels share one well.
ListColumns is a default Frame with a 1px inset, and only column labels go in its well. Tables render inside Frame themselves.

PreviousFieldset NextGauge