Sections

Utilities

Forms

Hooks

useIsMobileNew

Frame

Bordered box for grouping related content.

Section header

Brief description about the section

Section title

Section description

Installation


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.

Section header

Brief description about the section

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

Hint

On This Page

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