Masonry
A two-column layout that keeps items intact.
Preview
Loading...
import { Masonry, MasonryItem } from "@/components/ui/Masonry";
export function MasonryDemo() {
return (
<Masonry>
<MasonryItem>
<div className="h-8">Color</div>
</MasonryItem>
<MasonryItem>
<div className="h-12">Typography runs taller</div>
</MasonryItem>
<MasonryItem>
<div className="h-6">Space</div>
</MasonryItem>
<MasonryItem>
<div className="h-10">Motion</div>
</MasonryItem>
</Masonry>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/masonryManual
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 Masonry component into your components/ui/Masonry.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function Masonry({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="masonry"
className={cn("columns-2 gap-1", className)}
{...props}
/>
);
}
function MasonryItem({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="masonry-item"
className={cn("mb-1 break-inside-avoid rounded-sm bg-gray-3 p-1", className)}
{...props}
/>
);
}
export { Masonry, MasonryItem };