Beta

Stagger Grid

Grid Staggered, container with multiple variants and displays, four cells by default, three cells, and two cells.

Open in 21st devOpen in 21st dev
image
1
image
2
image
3
image
4

Installation

Usage

can be used as a component <GridStaggered /> or as a style via staggeredGridVariants style object.

<GridStaggered className="h-dvh p-8 ">
  {IMAGES.map((image, index) => (
    <div className="overflow-hidden rounded-md shadow" key={index}>
      <img src={image} alt="image" className="size-full object-cover" />
      <div className="text-center text-sm font-semibold text-gray-500">
        {index + 1}
      </div>
    </div>
  ))}
</GridStaggered>

Props

PropTypeDefault
variant?
default | threeCells | twoCells
default

Bento Grid

Bento Grid, container with multiple variants and displays, five cells by default, four cells, and three cells.

Custom Cursor updated

Turn your cursor into any element you want, text, image, video, or a shape.