Shadcn Frame Basic

Basic frame. Built with the Frame component. A free, open source shadcn frame example you can install with npx shadcn@latest add @reui/c-frame-1 and edit as your own code.

Basic frame

For AI Agents

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

Best for: The full anatomy in placeholder copy, a title bar over one panel and a footer line, at full container width

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

Two or more content panels sharing one title bar: use the Frame Separated Panels example
Settings rows in the shell that expand to reveal their content: 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://reui.io/components/frame/c-frame-1.md

MCPget_example("c-frame-1")

Installnpx shadcn@latest add @reui/c-frame-1

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Frame Basic

Frame

About Shadcn Frame Basic

Basic frame. Built with the Frame component. A free, open source shadcn frame example you can install with npx shadcn@latest add @reui/c-frame-1 and edit as your own code.

What You Can Build With Shadcn Frame Basic

Composes Frame, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-frame-1
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Frame Examples

Separated Panels Frame with separated panels
Stacked Panels Frame with stacked panels
Stacked Dense Frame with stacked panels and dense style
Collapsible Panels Frame with collapsible panels
Ghost Variant Frame with ghost variant
Dense Layout Frame with dense layout
Stacked Rows Frame with stacked panels
Extra Small Spacing Frame with extra small spacing
Small Spacing Frame with small spacing
Default Spacing Frame with default spacing
Large Spacing Frame with large spacing
Small Radius Frame with small border radius

Related Shadcn Component Categories

Gantt
Open-source shadcn gantt components with split tree and timeline panes, drag scheduling, and progress rollups.
Hover Card
Open-source shadcn hover card components for profile previews, rich link previews, and contextual details.
Icon Stack
Icon Tile
Open-source shadcn icon tile components for list row media, feature cards, empty states, and dashboard tiles.
Input
Open-source shadcn input components for form entry, search fields, and auth screens.
Input Group
Open-source shadcn input group components for prefixed inputs, suffixed actions, and combined form controls.

Frequently Asked Questions

When should I use Shadcn Frame Basic?

Use it for the full anatomy in placeholder copy, a title bar over one panel and a footer line, at full container width.

Shadcn Frame as a whole fits:

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

For two or more content panels sharing one title bar, use the Frame Separated Panels example. For settings rows in the shell that expand to reveal their content, use the Accordion component. For ready made KPI tiles, profile summaries or promo offers laid out across a page, use the Card blocks. For a storefront page of items with photos, prices, swatches and wishlist toggles, use the Product Grid blocks.

How do I install Shadcn Frame Basic?

Run npx shadcn@latest add @reui/c-frame-1. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Frame Basic free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Frame Basic use?

It composes Frame. The shadcn CLI installs those alongside the example.

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.