import {
Frame,
FrameDescription,Installation
pnpm dlx shadcn@latest add @reui/frame
Usage
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/reui/frame"<Frame>
<FramePanel>
<FrameHeader>
<FrameTitle>Frame Title</FrameTitle>
<FrameDescription>Frame Description</FrameDescription>
</FrameHeader>
<div className="p-5">Frame Content</div>
<FrameFooter>Frame Footer</FrameFooter>
</FramePanel>
</Frame>Customizing Radius
You can customize the border radius of the frame and its panels using the --frame-radius CSS variable.
<Frame className="[--frame-radius:var(--radius-lg)]">
<FramePanel>...</FramePanel>
</Frame>Examples
With Separated Panels
import {
Frame,
FrameDescription,With Stacked Panels
import {
Frame,
FrameDescription,With Dense Panels
import {
Frame,
FrameDescription,Without Outer Border
import {
Frame,
FrameDescription,Custom Spacing
import {
Frame,
FrameDescription,Custom Radius
import {
Frame,
FrameDescription,API Reference
Frame
The root container for one or more frame panels.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "ghost" | "default" | The visual style of the frame container. |
spacing | "sm" | "default" | "lg" | "default" | The internal padding of the frame and margin between panels. |
stacked | boolean | false | If true, removes margins between panels and connects them vertically with shared borders. |
dense | boolean | false | If true, removes padding on the panel. |
className | string | - | Additional CSS classes for the container. |
CSS Variables
| Variable | Default | Description |
|---|---|---|
--frame-radius | var(--radius-xl) | The border radius of the frame and its components. |
FramePanel
A card-like container within the frame that holds header, content, and footer.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the panel. |
FrameHeader
A container for the title and description, with default padding.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the header. |
FrameTitle
Heading for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the title. |
FrameDescription
Supporting text for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the description. |
FrameFooter
A container for actions or additional information at the bottom of the panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the footer. |