Logobaseui-cn

Frame

A layered panel shell for grouped content, headers, and compact surfaces.

Newlayoutdisplay
Loading preview...

Installation

npx baseui-cn add frame

Usage

import {
  Frame,
  FrameDescription,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/ui/frame"
<Frame>
  <FrameHeader>
    <FrameTitle>Project overview</FrameTitle>
    <FrameDescription>Grouped context for related content.</FrameDescription>
  </FrameHeader>
  <FramePanel>Panel content</FramePanel>
</Frame>

Examples

Stacked panels

Use multiple FramePanel sections when a grouped surface needs clear internal separation without turning into a dense card wall.

Loading preview...