Shadcn Frame

Custom Shadcn Frame for React and Tailwind CSS. Displays related content in a structured frame.

Installation


pnpm dlx shadcn@latest add @reui/frame

Usage

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

Shadcn Frame Free Components

Browse 19 production-ready Shadcn Frame components for dashboards, forms, and product UI. These examples use Base UI primitives from @base-ui/react and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 19 Shadcn Frame components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Filters Gantt

On This Page

Installation Usage Customizing Radius Examples With Separated Panels With Stacked Panels With Dense Panels Without Outer Border Custom Spacing Custom Radius API Reference Frame CSS Variables FramePanel FrameHeader FrameTitle FrameDescription FrameFooter

<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>

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

export function Pattern() {
  return (
    <Frame className="w-full">
      <FrameHeader>
        <FrameTitle>Section header</FrameTitle>
        <FrameDescription>Description for the section</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Separated panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
      <FramePanel>
        <h2 className="text-sm font-semibold">Separated panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
    </Frame>
  )
}

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

export function Pattern() {
  return (
    <Frame className="w-full" stacked>
      <FrameHeader>
        <FrameTitle>Section header</FrameTitle>
        <FrameDescription>Description for the section</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Stacked panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
      <FramePanel>
        <h2 className="text-sm font-semibold">Stacked panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
    </Frame>
  )
}

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

export function Pattern() {
  return (
    <Frame className="w-full" stacked dense>
      <FrameHeader>
        <FrameTitle>Section header</FrameTitle>
        <FrameDescription>Description for the section</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Stacked panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
      <FramePanel>
        <h2 className="text-sm font-semibold">Stacked panel</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
    </Frame>
  )
}

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

export function Pattern() {
  return (
    <Frame className="w-full" variant="ghost">
      <FrameHeader>
        <FrameTitle>No Outer Border</FrameTitle>
        <FrameDescription>
          This frame uses variant="ghost" to remove the outer border.
        </FrameDescription>
      </FrameHeader>
      <FramePanel>
        <p className="text-muted-foreground text-sm">
          The outer container of this frame has no border, only the background
          and panels are visible.
        </p>
      </FramePanel>
    </Frame>
  )
}

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

export function Pattern() {
  return (
    <Frame dense className="w-full max-w-sm">
      <FrameHeader>
        <FrameTitle>Inventory Check</FrameTitle>
        <FrameDescription>Real-time stock monitoring</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Warehouse A</h2>
        <p className="text-muted-foreground text-sm">
          Dense mode removes outer padding for a more compact appearance.
        </p>
      </FramePanel>
    </Frame>
  )
}

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

export function Pattern() {
  return (
    <Frame stacked className="w-full max-w-sm">
      <FrameHeader>
        <FrameTitle>Server Logs</FrameTitle>
        <FrameDescription>Recent activity and errors</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Auth Service</h2>
        <p className="text-muted-foreground text-sm">
          Successfully logged in user: admin
        </p>
      </FramePanel>
      <FramePanel>
        <h2 className="text-sm font-semibold">Database</h2>
        <p className="text-muted-foreground text-sm">
          Query execution time: 12ms
        </p>
      </FramePanel>
      <FramePanel>
        <h2 className="text-sm font-semibold">Storage</h2>
        <p className="text-muted-foreground text-sm">
          Upload complete: image.png
        </p>
      </FramePanel>
    </Frame>
  )
}

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 outer border radius of the frame. Panels derive their radius from it, so this is the single knob to adjust.
`--frame-panel-radius`	`calc(var(--frame-radius) - var(--frame-px) - 1px)`	The inner panel radius, reduced from `--frame-radius` so panel corners nest concentrically inside the frame.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the panel.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the header.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the title.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the description.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the footer.

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

export function Pattern() {
  return (
    <Frame className="w-full">
      <FrameHeader>
        <FrameTitle>Section header</FrameTitle>
        <FrameDescription>Description for the section</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <h2 className="text-sm font-semibold">Section title 2</h2>
        <p className="text-muted-foreground text-sm">Section description</p>
      </FramePanel>
      <FrameFooter>
        <p className="text-muted-foreground text-sm">Section footer</p>
      </FrameFooter>
    </Frame>
  )
}