Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/masonry-grid| Prop | Type | Default |
|---|
| Description |
|---|
items | MasonryGridItem[] | DEFAULT_ITEMS | Array of items to display in the grid |
columnsMobile | number | 3 | Number of columns on mobile screens |
columnsDesktop | number | 5 | Number of columns on desktop screens |
gap | number | 6 | Gap between items (Tailwind spacing scale) |
onItemClick | (item: MasonryGridItem) => void | undefined | Callback when an item is clicked |
showLoadingSkeleton | boolean | true | Show loading skeleton while images load |
className | string | undefined | Additional CSS classes |
| Property | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier |
name | string | Yes | Display name (shown on hover) |
image | string | No | Image URL |
href | string | No | Link destination |
prefers-reduced-motionhref for each itemonItemClick callback for custom actions