Shadcn Frame

Browse 19 production-ready shadcn frame components for bounded layouts, viewport sections, and responsive containers. Shadcn Frame is compatible with Radix UI and Base UI layout components and is fully aligned with Shadcn Create style options so your previews match your design tokens.

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/components/frame.md

MCPget_component("frame")

Installnpx shadcn@latest add @reui/frame

Full index for agents:llms.txtReUI MCP setup

Shadcn Frame: Build Bounded Layout Sections

Shadcn Frame is a bounded container primitive that maintains semantic HTML structure while providing flexible layout composition. It aligns with Radix UI and Base UI components for container semantics, and is fully compatible with Shadcn Create style options so radius, spacing, and theme tokens apply consistently.

It creates a visual boundary for page sections, dashboard regions, or viewport-aware containers so content stays organized and readable at any screen size.

ReUI lists frame components inside realistic page layouts so you evaluate spacing, depth, and nesting next to a Shadcn Card or Shadcn Table, not only a standalone block. The sections below explain what the component is, why teams use it, which features matter, and how it pairs with other primitives.

What is Shadcn Frame?

In layout terms, a frame is a bounded container that creates visual and semantic sections. Shadcn Frame follows semantic HTML and maintains accessibility expectations for region landmarks, so it works well when you also build with Radix UI primitives.

Components here show max-width containers, nested frames, and dashboard-style sections. They help you decide depth, padding, and composition before shipping the same structure into Next.js or a server-rendered React application.

Why Use Shadcn Frame?

Frames reduce noise by creating clear visual boundaries between page regions. They make layout predictable when many sections or cards sit on one URL, and they help responsive design by centralizing max-width and padding logic in one reusable component.

The layouts on this page show how frames nest with Shadcn Card, Shadcn Dialog, and form regions.

Shadcn Frame Features

Semantic HTML. Uses section or div with proper landmarks so assistive tech recognizes page structure and regions stay accessible.
Max-Width Control. Bounded container widths centered on screen, aligned with design system breakpoints and spacing scale.
Responsive Padding. Tailwind utility classes adjust container padding at different breakpoints for consistent inner and outer spacing.
Nesting Support. Frames nest cleanly so dashboard chrome, modals, and page sections all respect the same max-width and alignment.
Shadcn Create Compatible. Radius, spacing, and color tokens from Shadcn Create apply to frame surfaces so previews match exported UI.

ReUI Frame: In-House Custom Shadcn Component

ReUI Frame is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project: following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Frame is a custom container component not available in base shadcn/ui. It provides a consistent layout shell: title, toolbar slot, action button, and scrollable content area: used across Data Grid, Kanban, Timeline, Chart, and Sortable components to produce self-contained dashboard panels without writing per-page chrome code.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling: only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Wrap a Shadcn Card group or Shadcn Table inside a frame to establish clear page boundaries. Pair frames with Shadcn Dialog or Shadcn Drawer to maintain layout alignment when modals or panels slide in.

Use frames inside dashboards with Shadcn Tabs or Shadcn Accordion to organize top-level sections. Nest frames when building nested layouts like page header, main content, and footer regions.

Combine frames with Shadcn Field groups and Shadcn Button actions for forms and data entry workflows that span multiple viewport sizes.

Frequently Asked Questions

What is a frame used for in modern product layouts?

Frames create bounded regions on pages so content stays readable and centered at wide viewports. They organize dashboards, pages, and modal bodies while centralizing max-width and padding logic. Teams use them to keep layout consistent when mixing cards, tables, and other sections.

Should I use a frame or a card for a page section?

Use a frame for top-level layout regions and page boundaries. Use a Shadcn Card when you need a styled container with border, shadow, or elevated appearance. Frames are layout primitives; cards are content containers. You often nest cards inside frames.

How does a frame differ from a container in Tailwind CSS?

The Tailwind container applies max-width at certain breakpoints but doesn't include semantic structure or built-in padding options. Shadcn Frame uses semantic HTML, respects Shadcn Create tokens, and pairs with other primitives for consistent, accessible layouts.

Can I use frames with Radix UI and Base UI?

Yes. Shadcn Frame uses semantic HTML so it composes cleanly with Radix UI primitives and Base UI unstyled components. The frame handles layout; your composed content handles interaction and state.

Is Shadcn Frame responsive out of the box?

Frames use Tailwind breakpoints and responsive utilities so padding, max-width, and spacing adjust at tablet and mobile sizes. You customize responsive behavior by modifying the underlying Tailwind classes to match your design system.

How are ReUI frame components different from a minimal frame block?

ReUI frames sit inside realistic dashboards, pages, and modal layouts. You see how frames compose with Shadcn Table, Shadcn Pagination, and form regions together, which is closer to production reality than a standalone block.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.