Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K

Shadcn Frame

PreviousNext

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

Base UIRadix UI

Installation

pnpm dlx shadcn@latest add @reui/frame

Usage

import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from

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.

FiltersGantt

On This Page

InstallationUsageCustomizing RadiusFor AI AgentsExamplesWith Separated PanelsWith Stacked PanelsWith Dense PanelsWithout Outer BorderCustom SpacingCustom RadiusAPI ReferenceFrameCSS VariablesFramePanelFrameHeaderFrameTitleFrameDescriptionFrameFooter
"@/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>

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Dashboard, settings and status sections with a title bar, card panels and a footer line
  • Lists of services, records or log entries joined into one stacked column of bordered panels
  • A titled shell around other parts, such as a collapsible run step that opens to its instructions

When not to use

  • Several sections that each expand and collapse, one or many open at a time: use the Accordion component
  • Ready made KPI tiles, profile summaries or promo offers laid out across a page: use the Card blocks
  • A storefront page of items with photos, prices, swatches and wishlist toggles: use the Product Grid blocks

Agent notes

  • dense strips the padding and gap of Frame itself and pulls each FramePanel onto the outer border; the panels keep their own padding
  • stacked joins only FramePanel elements that are adjacent direct children of Frame; a wrapper around one leaves both fully rounded and bordered
  • FramePanel grows into any spare height of Frame; pass fit when a panel should keep the height of its own content
Markdownhttps://web.dev.reui.io/docs/components/base/frame.md
MCPget_component("frame")
Installnpx shadcn@latest add @reui/frame
Full index for agents:llms.txtReUI MCP setup

Examples

With Separated Panels

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

With Stacked Panels

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

With Dense Panels

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

Without Outer Border

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

Custom Spacing

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

Custom Radius

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

API Reference

Frame

The root container for one or more frame panels.

PropTypeDefaultDescription
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.
stackedbooleanfalseIf true, removes margins between panels and connects them vertically with shared borders.
densebooleanfalseIf true, removes padding on the panel.
classNamestring-Additional CSS classes for the container.

CSS Variables

VariableDefaultDescription
--frame-radiusvar(--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-radiuscalc(var(--frame-radius) - var(--frame-px) - 1px)The inner panel radius, reduced from --frame-radius so panel corners nest concentrically inside the frame.

FramePanel

A card-like container within the frame that holds header, content, and footer.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the panel.

FrameHeader

A container for the title and description, with default padding.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the header.

FrameTitle

Heading for the frame panel.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the title.

FrameDescription

Supporting text for the frame panel.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the description.

FrameFooter

A container for actions or additional information at the bottom of the panel.

PropTypeDefaultDescription
classNamestring-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>
  )
}