---
title: Frame
description: "Astro frame parts for related panels, headings, and actions."
seo:
    title: "Frame for Astro — examples and usage"
---

This component uses [Coss UI](https://coss.com/ui/docs/components/frame) styles.
The shell is muted. Each panel is a raised surface. Extra panels keep a small gap.

```astro
---
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

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

## Usage

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

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

## Composition

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

See the [card examples](/components/card) 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](/components/card) for one content unit and [Section](/components/section) for a full page section.