Frame

A grey tray that holds one or more white panels under a quiet heading.

ui.framecomponents/ui/frame.tsx

Use case

For the AI

Use a frame to group what belongs together under one small heading: the next steps on a client's page, the panels of one integration's settings, two stacked panels of the same record. The heading sits on the tray (FrameHeader, FrameTitle, FrameDescription) and each FramePanel is a white sheet inside it.

Use it when

A short list under a heading on a record's page
Two or more panels that belong to one subject
A settings group with its own title and a footer note

Use something else when

One subject that stands alone, with its own title and buttons: Card
Sections a person opens and closes: Accordion
Splitting content inside one panel: Separator
Rows of records with columns: Table

Examples

Next steps

Renew the domainPay the invoiceCall the landlord

Code

Import

import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/ui/frame"

Usage

export function NextSteps() {
  return (
    <Frame className="w-full max-w-md">
      <FrameHeader>
        <FrameTitle className="text-[13px] font-medium text-ink-3">Next steps</FrameTitle>
      </FrameHeader>
      <FramePanel className="grid gap-2 text-[13.5px]">
        <span>Renew the domain</span>
        <span>Pay the invoice</span>
        <span>Call the landlord</span>
      </FramePanel>
    </Frame>
  )
}

Rules

Content goes in a FramePanel; the tray itself holds only FrameHeader, the panels and FrameFooter.
The tray is the surface tone: put the frame on the white page ground (bg-background), where it reads as a tray.
Panels stack on their own with a 4px gap; do not add margins between them.
The title is quiet: 13px, medium, text-ink-3, as in the showcase.