Data Display

Masonry

A responsive CSS multi-column masonry layout for cards and images.

Import

tsx

import { Masonry } from "@cooud-ui/ui";

bash

npx cooud-ui add masonry

Examples

Responsive cards

A pure CSS multi-column layout that flows items top-to-bottom, balancing columns regardless of card height. `columns` takes a responsive map and `gap` controls both axes — no JS measurement, no layout shift.

Onboarding

Passwordless email code, ready in seconds.

Checkout

Card and boleto with a builder-driven layout, custom tracking scripts, and upsells that convert.

Payouts

Settled on a fixed schedule.

Analytics

Live revenue, conversion and refund metrics rolled up per product and per day.

Members

Grant and revoke course access automatically.

Notifications

Push and email on every sale.

tsx

const cards = [
  { id: "m-1", title: "Onboarding", body: "Passwordless email code." },
  { id: "m-2", title: "Checkout", body: "Card and boleto with upsells that convert." },
  { id: "m-3", title: "Payouts", body: "Settled on a fixed schedule." },
  { id: "m-4", title: "Analytics", body: "Live revenue and conversion metrics." },
  { id: "m-5", title: "Members", body: "Grant and revoke access automatically." },
  { id: "m-6", title: "Notifications", body: "Push and email on every sale." },
];

return (
  <Masonry columns={{ base: 1, sm: 2, lg: 3 }} gap="1rem">
    {cards.map((card) => (
      <Card key={card.id}>
        <CardHeader>
          <CardTitle>{card.title}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-fg-secondary">{card.body}</p>
        </CardContent>
      </Card>
    ))}
  </Masonry>
);

API Reference

Generated from the component's exported types.

MasonryProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`columns`	`number \| MasonryColumns`	`DEFAULT_COLUMNS`	Number of columns, either a fixed count or a responsive map keyed by breakpoint.
`gap`	`string`	`"1rem"`	CSS length used for both the column gap and the vertical gap between items.