Stack

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

src/registry/ui/stack.tsx/r/stack.json

Installation#

bash

npx shadcn@latest add @minidev/stack

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/stack.json

Usage#

tsx

import { Stack } from "@/components/ui/stack"

export function Example() {
  return (
    <Stack gap={2}>
      <div className="h-8 rounded-lg bg-sunken" />
      <div className="h-8 rounded-lg bg-sunken" />
    </Stack>
  )
}

API reference#

Stack props
Prop	Type	Default
`gap`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8`	`3`

Also accepts every prop of <div>, passed through to the root element.

Examples#

LayoutShells & grids

AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.App ShellTailwind 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.Aspect RatioShadcn 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.CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.ClusterFlex 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.

All layout components

Learn more

What is clamp() (CSS)?Glossary What is Logical properties?Glossary