Sections

Components

Utilities

Forms

Hooks

useIsMobile

Frame

Copy Markdown

Bordered box for grouping related content.

PreviewCode

Section title

Section description

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/frame

Anatomy#

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

Usage#

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

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

Title & Description#

FrameHeader supports two usage patterns:

Using props#

Pass title and description props directly to FrameHeader.

<FrameHeader title="Frame Title" description="Frame description" />

This approach does not require FrameTitle or FrameDescription components.

Using components#

Use FrameTitle and FrameDescription as children for more control.

<FrameHeader>
  <FrameTitle>Frame Title</FrameTitle>
  <FrameDescription>Frame description</FrameDescription>
</FrameHeader>

Examples#

Separated Panels#

By default, multiple panels are separated with spacing between them.

PreviewCode

Separated panel

Section description

Separated panel

Section description

API Reference#

Frame#

Main container for grouping related content into panels.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FramePanel#

A single panel with optional header and footer.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FrameHeader#

Header area for the panel. Often contains title and description.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FrameTitle#

Panel title or heading.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FrameDescription#

Panel description or subtitle.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FrameFooter#

Footer area for the panel. Often contains actions.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

[

Floating Panel ](/docs/components/floating-panel)[

Hint ](/docs/components/hint)

On This Page

Installation Anatomy Usage Title & Description Using props Using components Examples Separated Panels API Reference Frame FramePanel FrameHeader FrameTitle FrameDescription FrameFooter