# Frame

A container component for displaying content in a frame.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import {
	Frame,
	FrameDescription,
	FrameFooter,
	FrameHeader,
	FramePanel,
	FrameTitle,
} from "coss-svelte";
</script>

<Frame class="w-full">
	<FrameHeader>
		<FrameTitle>Section header</FrameTitle>
		<FrameDescription>Brief description about the section</FrameDescription>
	</FrameHeader>
	<FramePanel>
		<h2 class="font-semibold text-sm">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>

```

## Anatomy

- `Frame`
- `FrameDescription`
- `FrameFooter`
- `FrameHeader`
- `FramePanel`
- `FrameTitle`

## API Reference

### Frame

A container component for displaying content in a frame.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### FrameDescription

Provides supporting copy for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### FrameFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### FrameHeader

Groups heading content for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### FramePanel

Renders the main panel surface for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### FrameTitle

Names the parent surface or section.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 4 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/frame.json` for the complete local file and dependency closure.
- Frame is stable in the current source catalog.