# Frame (/docs/components/frame)



<ComponentPreview name="frame-demo" />

## Overview [#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 [#anatomy]

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

## Usage guidance [#usage-guidance]

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

## Accessibility [#accessibility]

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

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add frame
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="frame" title="components/ui/frame.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

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