import {
Frame,
FrameDescription,pnpm dlx shadcn@latest add @blitz-ui/frame
import {
Frame,
FrameDescription,
FrameFooter,
FrameHeader,
FramePanel,
FrameTitle,
} from "@/components/blitz-ui/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>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>import {
Frame,
FrameDescription,import {
Frame,
FrameDescription,import {
Frame,
FrameDescription,import {
Frame,
FrameDescription,import {
Frame,
FrameDescription,import {
Frame,
FrameDescription,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. |
| Variable | Default | Description |
|---|---|---|
--frame-radius | var(--radius-xl) | The border radius of the frame and its components. |
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. |
A container for the title and description, with default padding.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the header. |
Heading for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the title. |
Supporting text for the frame panel.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the description. |
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. |
Section description
Section description
Section description
Section description
Section description
Section description
Section description
The outer container of this frame has no border, only the background and panels are visible.
Dense mode removes outer padding for a more compact appearance.
Successfully logged in user: admin
Query execution time: 12ms
Upload complete: image.png