Frame

Astro frame parts for related panels, headings, and actions.

This component uses Coss UI styles. The shell is muted. Each panel is a raised surface. Extra panels keep a small gap.

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

<Frame class="w-full max-w-md">
  <FrameHeader>
    <FrameTitle>Section header</FrameTitle>
    <FrameDescription>
      Files and notes for the next content review
    </FrameDescription>
  </FrameHeader>
  <FramePanel>
    <h2 class="text-sm font-semibold">Section title</h2>
    <p class="text-muted-foreground text-sm">Section description</p>
  </FramePanel>
  <FrameFooter>
    <p class="text-muted-foreground text-sm">Footer</p>
  </FrameFooter>
</Frame>

Installation

bunx --bun shadcn@latest add @gnosticai/frame

Usage

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

<Frame>
  <FrameHeader>
    <FrameTitle>Title</FrameTitle>
    <FrameDescription>Description</FrameDescription>
  </FrameHeader>
  <FramePanel>Content</FramePanel>
  <FrameFooter>Footer</FrameFooter>
</Frame>

Composition

Frame
├── FrameHeader
│   ├── FrameTitle
│   └── FrameDescription
├── FramePanel
└── FrameFooter

See the card examples for CardFrame, which clips a card into a framed shell.

When to use Frame

Use Frame to place several related panels inside one surrounding surface. Compose its header, title, description, panel, and footer as needed. Keep each panel focused on one part of the task.

Keyboard and behavior

Frame supplies layout, not selection or disclosure behavior. Use semantic headings and actual buttons inside the parts. The page still owns heading levels and landmarks.

Theme and layout

The outer muted surface and inner panels share border and radius tokens. Check panel edges and spacing when content includes a table or a card with its own border. Avoid stacking unnecessary surfaces.

Related choices

Use Card for one content unit and Section for a full page section.