shadcn.io is not affiliated with official shadcn/ui
Framework
UI library
Section header
Brief description about the section
Section title
Section description
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/frame.jsonUsage
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/ui/frame";<Frame className="w-full max-w-md">
<FrameHeader>
<FrameTitle>Section header</FrameTitle>
<FrameDescription>Brief description about the section</FrameDescription>
</FrameHeader>
<FramePanel>
<h2 className="font-semibold text-sm">Section title</h2>
<p className="text-muted-foreground text-sm">Section description</p>
</FramePanel>
<FrameFooter>
<p className="text-muted-foreground text-sm">Footer</p>
</FrameFooter>
</Frame>Demos
Separated Panels
API Reference
Frame
div
PropType
AttributeType
FramePanel
div
PropType
AttributeType
FrameHeader
header
PropType
AttributeType
FrameTitle
div
PropType
AttributeType
FrameDescription
div
PropType
AttributeType
FrameFooter
footer
PropType
AttributeType