Custom Shadcn Frame for React and Tailwind CSS. Displays related content in a structured frame.
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. |
More Shadcn Frame components
Browse 17 production-ready Shadcn Frame components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 17 Shadcn Frame components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.