Componentdata

Masonry Columns

CSS columns masonry: cards flow by height with break-inside protection.

Preview

Live Preview

Short

This is longer card content

Installation

Tokens guide →

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

npx bigbullui add masonry-columns

Or install the full npm package:

npm install bigbullui

Usage

import { MasonryColumns } from "@/components/ui/masonry-columns";

<MasonryColumns />

Source code

masonry-columns.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 MasonryItem {
  id: string;
  content: React.ReactNode;
}

export interface MasonryColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
  items: MasonryItem[];
  columns?: 2 | 3 | 4;
}

/** CSS kolonlu masonry — kartlar yüksekliğine göre akar. */
export function MasonryColumns({ items, columns = 3, className, ...props }: MasonryColumnsProps) {
  const colClass = { 2: "sm:columns-2", 3: "sm:columns-3", 4: "sm:columns-4" }[columns];

  return (
    <div className={cn("columns-1 gap-4 space-y-4", colClass, className)} {...props}>
      <style>{`@keyframes masonryIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      {items.map((item, idx) => (
        <div
          key={item.id}
          className="break-inside-avoid rounded-lg border border-border bg-card p-4 animate-[masonryIn_0.4s_ease-out_both] motion-reduce:animate-none transition-colors hover:border-foreground/30 motion-reduce:transition-none"
          style={{ animationDelay: `${(idx % 12) * 60}ms` }}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Description
items	MasonryItem[]
columns	2 \| 3 \| 4