Pinterest Grid

Photo gallery grid with lightbox effect

$ npx @hritik-sharmaa/repeat-ui add grid-pinterest-grid
Category
Grid
Added
Aug 14, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Dragon sculpture on building

Dragon on building

Architectural dragon sculpture mounted on a building facade

by Alex Chen

Ocean waves crashing

Ocean Waves

Powerful ocean waves crashing with white foam and blue water

Spider artwork illustration

Spider Art

Artistic illustration or design featuring spider motifs and patterns

Ocean water waves

Ocean water

Clear blue ocean water with gentle waves and natural movement

Hotdog with sauce and toppings

Hotdog with sauce

Delicious hotdog served with sauce and various toppings

Spider-man superhero

Spider-man

Spider-man superhero character in action pose or costume

Vintage camera rolls

Camera rolls

Collection of vintage film camera rolls and photography equipment

by Sarah Johnson

Girl smoking cigarette

Smoking girl

Portrait of a girl smoking a cigarette in artistic lighting

by Marcus Rodriguez

Llama in desert landscape

Llama in the Desert

Cute llama standing in a desert environment with sand dunes

Praktica vintage camera

parktica camera

Classic Praktica vintage film camera with retro design

Customize
4
16px
24px
1.02×
import GridPinterestGrid from "@/components/repeat-ui/grid-pinterest-grid/preview";

<GridPinterestGrid items={items} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add grid-pinterest-grid --variant ts-tailwind
  2. Use it

    The files are in components/repeat-ui/grid-pinterest-grid/.

    import GridPinterestGrid from "@/components/repeat-ui/grid-pinterest-grid/preview";
    
    export default function Page() {
      return <GridPinterestGrid />;
    }

Props

PropTypeDefaultDescription
items[]Array of items to display in the Pinterest grid
columnsnumber4Number of columns in the grid layout
gapnumber16Gap between grid items in pixels
onItemClick(item: PinterestItem) => voidundefinedCallback function triggered when an item is clicked
radiusnumber24Card corner radius in pixels.
hoverScalenumber1.02How much a card grows on hover.

More grid

See all