║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Stack description: A component that arranges elements with overlapping visual effects for avatar groups and more. preview: true links: api: /docs/components/stack#api-reference

<ComponentTabs name="stack-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/stack"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot class-variance-authority
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="stack" />

</Step> </Steps>

Layout

import { Stack } from "@/components/ui/stack";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

<Stack>
  <Avatar>
    <AvatarImage src="/tony-hawk.png" />
    <AvatarFallback>TH</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/rodney-mullen.png" />
    <AvatarFallback>RM</AvatarFallback>
  </Avatar>
</Stack>

Examples

With Truncation

Automatically truncate long lists and show overflow indicators with the max prop.

<ComponentTabs name="stack-truncation-demo" />

With RTL

Support for right-to-left layouts and vertical RTL stacking.

<ComponentTabs name="stack-rtl-demo" />

With Icons

Use the Stack component with icons or other elements beyond avatars.

<ComponentTabs name="stack-icons-demo" />

API Reference

Stack

The main stack container that handles layout and masking of child elements.

<AutoTypeTable path="./types/docs/stack.ts" name="StackProps" />

<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║