Componentdata

Feed Masonry

Masonry feed of mixed-height content cards.

Preview

Live Preview

Feed item 1

Feed item 2

Installation

Tokens guide →

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

npx bigbullui add feed-masonry

Or install the full npm package:

npm install bigbullui

Usage

import { FeedMasonry } from "@/components/ui/feed-masonry";

<FeedMasonry />

Source code

feed-masonry.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";
import { MasonryColumns } from "./masonry-columns";

export interface FeedMasonryProps extends React.HTMLAttributes<HTMLDivElement> {
  items: { id: string; content: React.ReactNode }[];
  columns?: 2 | 3;
}

/** Masonry akış: farklı yükseklikli içerik kartları. */
export function FeedMasonry({ items, columns = 2, className, ...props }: FeedMasonryProps) {
  return (
    <div className={cn("w-full", className)} {...props}>
      <MasonryColumns items={items.map((i) => ({ id: i.id, content: i.content }))} columns={columns} />
    </div>
  );
}

Props

Prop	Type	Description
items	{ id: string; content: React.ReactNode }[]
columns	2 \| 3