Frame

Section header

Brief description about the section

Section title

Section description

Overview

Use Frame when you need a simple bordered surface around related content.

Frame is lighter than Card. It works well for previews, examples, media, code-adjacent content, and small grouped regions that do not need card header or footer structure.

Anatomy

A frame is mainly a container. It gives content a boundary without adding a full card layout.

Usage guidance

Use Frame for visual grouping. Use Card when the content needs a title, description, content area, and actions.

Accessibility

Frame does not add meaning by itself. Use headings, labels, and semantic HTML inside it when the grouped content needs structure.

Installation

npm

npx love-ui@latest add frame

Usage

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

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