ComponentsGlobes & maps
Image Wall
A tilted wall of images whose columns drift in opposite directions.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { ImageWall } from "@/components/miyuki-ui/image-wall";
import { landscape, moods } from "@/registry/lib/art";
const images = Array.from({ length: 24 }, (_, i) =>
landscape(`wall-${i}`, { mood: moods[(i * 5) % moods.length], width: 480, height: 360 }),
);
export default function ImageWallDemo() {
return <ImageWall images={images} className="size-full" />;
}Install
npx shadcn@latest add @miyuki-ui/image-wallThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
ImageWall
Prop
Type