52 Pro components and page blocks

Get Pro
uibrik

Masonry Shuffle

Pro

Preview

Customize

Row height170px
Gap10px
Radius14px
Duration0.60s
Bounce0.12

Usage

import { MasonryShuffle } from "@/components/uibrik/masonry-shuffle/masonry-shuffle";

<MasonryShuffle />

Installation

Pro

Masonry Shuffle is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/masonry-shuffle

Props

MasonryShuffle
rowHeight
Type number
170
Height a row aims for. Rows land a little under it so they fill the width exactly.
gap
Type number
10
Space between tiles.
radius
Type number
14
Corner radius of a tile.
duration
Type number
0.6
How long a move takes.
bounce
Type number
0.12
Springiness of a move. 0 settles without overshoot.
toolbar
Type boolean
true
Show Shuffle, Add and Reset above the grid.
expandable
Type boolean
true
Enlarge a photo in the centre of its row when pressed, with its neighbours fitted around it.
removable
Type boolean
true
Show a remove button on each tile.
items
Type { id: string; src: string; alt: string; width: number; height: number }[]
SAMPLE_ITEMS
Photos in order. width and height set the aspect ratio.
initialCount
Type number
items.length - 4
How many photos show at first; Add brings in the rest.
onChange
Type (items) => void
–
Called with the shown photos in their new order after every change.
className
Type string
–
Classes for the wrapper.