# Grid Bento Demos

> Grid Bento Demo with multiple variants.

A shadcn/ui block from the [@systaliko-ui](https://systaliko-ui.vercel.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/systaliko-ui/grid-bento-four-cells-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/grid-bento-four-cells-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/grid-bento-four-cells-demo-light-378594f4f2c44389.png
- Registry item: https://systaliko-ui.vercel.app/r/grid-bento-four-cells-demo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento-four-cells-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://systaliko-ui.vercel.app/r/grid-bento-four-cells`

## Files

### `registry/demo/blocks/grid-bento-four-cells/index.tsx`

```tsx
import { GridBento } from '@/components/systaliko-ui/blocks/grid-bento';
const IMAGES = [
  'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?q=80&w=2264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9reW98ZW58MHx8MHx8fDA%3D',
  'https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRva3lvfGVufDB8fDB8fHww',
];

export function GridBentoFourCellsDemo() {
  return (
    <GridBento
      variant={'fourCells'}
      className="h-screen py-12 px-6 w-full place-content-center place-items-center"
    >
      {IMAGES.map((imageUrl, index) => (
        <div
          key={index}
          className="overflow-hidden size-full rounded-xl shadow-xl"
        >
          <img className="size-full object-cover" src={imageUrl} alt="tokyo" />
        </div>
      ))}
    </GridBento>
  );
}
```