Stack
Overlapping panels offset from one another.
Preview
One
Two
Three
import { Stack } from "@/components/ui/Stack";
export function StackDemo() {
return (
<Stack>
<span>One</span>
<span>Two</span>
<span>Three</span>
</Stack>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/stackManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Stack component into your components/ui/Stack.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function Stack({ className, children, ...props }: React.ComponentProps<"div">) {
const items = React.Children.toArray(children);
return (
<div data-slot="stack" className={cn("relative h-16 w-16", className)} {...props}>
{items.map((child, index) => (
<div
key={index}
className="absolute inset-0 rounded-sm border border-gray-6 bg-gray-1 p-1 shadow-sm"
style={{ transform: `translate(${index * 8}px, ${index * 8}px)` }}
>
{child}
</div>
))}
</div>
);
}
export { Stack };