Componentdata

Stack

Stacked container with staggered angles and hover fan-out.

Preview

Live Preview

PASS #001VIP

GOLDEN TICKET

ROW A • SEAT 01

PASS #002STD

BALCONY ACCESS

ROW B • SEAT 14

PASS #003PRESS

ALL-ACCESS PASS

STAGE • ROW 0

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add stack

Or install the full npm package:

npm install bigbullui

Usage

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

<Stack fanOnHover>
  <div>Ticket 1</div>
  <div>Ticket 2</div>
</Stack>

Source code

stack.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
  fanOnHover?: boolean;
  className?: string;
}

export function Stack({
  children,
  fanOnHover = true,
  className,
  ...props
}: StackProps) {
  const childArray = React.Children.toArray(children);

  return (
    <div
      className={cn(
        "group relative flex items-center justify-center p-6 select-none",
        className
      )}
      {...props}
    >
      {childArray.map((child, idx) => {
        const offset = idx - (childArray.length - 1) / 2;
        const rotateDeg = offset * 4;
        const translateX = offset * 12;

        return (
          <div
            key={idx}
            style={{
              zIndex: idx + 1,
              transform: `rotate(${rotateDeg}deg) translateX(${translateX}px)`,
            }}
            className={cn(
              "transition-transform duration-300 ease-out",
              fanOnHover && "group-hover:rotate-[calc(var(--offset)*8deg)] group-hover:scale-105"
            )}
          >
            {child}
          </div>
        );
      })}
    </div>
  );
}

Props

Prop	Type	Description
children	React.ReactNode	Layered stub cards or elements.
fanOnHover	boolean	Whether cards fan out smoothly on hover (default true).