Playground

Tweak every parameter and see the result live. The code updates as you change settings.

Controls

Images8

Gap12px

Seed42

Border Radius0px

Dynamic Height

Height500px

Background

Generated Code

MyGallery.tsx

import { Pendu } from '@inkorange/pendu';

function MyGallery() {
  return (
    <div style={{ height: 500 }}>
      <Pendu gap={12} seed={42}>
        {images.map(img => (
          <Pendu.Image
            key={img.id}
            src={img.src}
            width={img.width}
            height={img.height}
            alt={img.alt}
          />
        ))}
      </Pendu>
    </div>
  );
}