React layout components
Free React layout primitives for Tailwind: cards, containers, stacks, clusters, grids, accordions, resizable panels, split panes and app shells.
28 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Layout primitives keep spacing consistent without memorizing class strings. Stack, cluster, center and container encode the common patterns, and cards and panels carry the elevation system.
For full apps, the app shell and resizable panels give you the frame, and the rest of the kit fills it.
Components 27
AccordionuiAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.npx shadcn@latest add ui.minidev.pro/r/accordion.jsonApp ShelluiTailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.npx shadcn@latest add ui.minidev.pro/r/app-shell.jsonAspect RatiouiShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.npx shadcn@latest add ui.minidev.pro/r/aspect-ratio.jsonCarduiShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.npx shadcn@latest add ui.minidev.pro/r/card.jsonCenteruiLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.npx shadcn@latest add ui.minidev.pro/r/center.jsonClusteruiFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.npx shadcn@latest add ui.minidev.pro/r/cluster.jsonCollapsibleuiShadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.npx shadcn@latest add ui.minidev.pro/r/collapsible.jsonContaineruiResponsive page container that centers content with side padding and a max width preset: sm, default, lg or full. The basic wrapper for Tailwind layouts.npx shadcn@latest add ui.minidev.pro/r/container.jsonDescription ListuiSemantic dl, dt and dd list of label and value pairs in a responsive two column grid with dividers. Good for record details and summaries in Tailwind apps.npx shadcn@latest add ui.minidev.pro/r/description-list.jsonHeadinguiA heading primitive that renders h1 through h6 with a matched type scale, tuned letter spacing and medium weight. Pick the level with the as prop in React.npx shadcn@latest add ui.minidev.pro/r/heading.jsonInsetuiA recessed panel with a sunken background, rounded border and responsive padding for grouping secondary content, code samples or previews inside a card or page.npx shadcn@latest add ui.minidev.pro/r/inset.jsonList ItemuiA flexible list row with leading and trailing slots around a truncated heading and description, split by hairline borders. Build settings or contact lists.npx shadcn@latest add ui.minidev.pro/r/list-item.jsonPage HeaderuiA Tailwind page title block with an h1, an optional description and a wrapping slot for action buttons on the right, set off by a bottom border.npx shadcn@latest add ui.minidev.pro/r/page-header.jsonProseuiA Tailwind typography wrapper for raw HTML or MDX that styles headings, muted paragraphs, links, lists, inline code and blockquotes at a readable measure.npx shadcn@latest add ui.minidev.pro/r/prose.jsonResizable PanelsuiTwo resizable panels split by a draggable divider, clamped between 20 and 80 percent. The divider is a focusable separator that also moves with arrow keys.npx shadcn@latest add ui.minidev.pro/r/resizable-panels.jsonScroll AreauiCustom scroll area on Base UI with a thin rounded thumb, vertical or horizontal scrollbars and a focus ring on the viewport. A shadcn-compatible ScrollArea.npx shadcn@latest add ui.minidev.pro/r/scroll-area.jsonSection HeaderuiTailwind section header with a title, optional muted description and a right-aligned actions slot that wraps on narrow screens. Use it above cards and tables.npx shadcn@latest add ui.minidev.pro/r/section-header.jsonSeparatoruiHairline separator on Base UI that draws a 1px rule horizontally or vertically, stretching to fill its container. A drop-in shadcn Separator for React layouts.npx shadcn@latest add ui.minidev.pro/r/separator.jsonSplit PaneuiStatic two-column split pane that stacks on mobile and sits side by side from md up, with a hairline divider. Handy for compare views and editor previews.npx shadcn@latest add ui.minidev.pro/r/split-pane.jsonStackuiVertical stack layout primitive that arranges children in a flex column with a gap prop from 1 to 8 on a 4px scale. Accepts all normal div props in React.npx shadcn@latest add ui.minidev.pro/r/stack.jsonSticky BaruiSticky bottom action bar with a translucent blurred background and a hairline top border. Keeps save, cancel or checkout actions in reach on long pages.npx shadcn@latest add ui.minidev.pro/r/sticky-bar.jsonTextuiText paragraph primitive with muted, subtle and mono variants on top of your base type styles. Keeps secondary copy and inline technical text consistent.npx shadcn@latest add ui.minidev.pro/r/text.jsonVisually HiddenuiVisually hidden wrapper that keeps content available to screen readers while hiding it on screen via sr-only. Use it for icon button labels and extra context.npx shadcn@latest add ui.minidev.pro/r/visually-hidden.jsonWelluiA recessed Tailwind panel with a sunken background, hairline border and inner highlight. Use it to set apart notes, code output or secondary content.npx shadcn@latest add ui.minidev.pro/r/well.jsonWindow ChromeuiA macOS style window frame for React with three traffic light dots, a truncated title bar and a padded content area for framing demos and screenshots.npx shadcn@latest add ui.minidev.pro/r/window-chrome.jsonMasonry GriduiA masonry layout for React that keeps source order: a CSS grid with measured row spans, so keyboard and screen reader order match the visual flow.npx shadcn@latest add ui.minidev.pro/r/masonry-grid.jsonAvatar GroupuiReact avatar group that stacks overlapping avatars with tooltips, lifts one on hover, collapses extras into a +N chip with a popover list and falls back to tinted initials.npx shadcn@latest add ui.minidev.pro/r/avatar-group.json
Motion 1
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Why use layout components instead of Tailwind classes?
They encode spacing and alignment decisions once, so pages stay consistent and refactors touch one file.
Are there resizable panels?
Yes. Resizable panels and split pane support drag and keyboard resizing.
Does the card support materials?
Yes. Surfaces read the material tokens, so a card follows the page material: hairline, glass, metal or paper.