Image Variants

Two-by-two grid of AI-generated image variants. The selected tile gets a primary border.

Mountain ridge1
Mountain lake2
Forest canopy3
Starry night4

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Ai13 } from "@/components/beste/piece/ai13";

<Ai13
  selected={0}
  variants={[
    {
      "src": "https://images.unsplash.com/photo-1688644707880-3d0df0fb2dc5?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fHw%3D",
      "alt": "Mountain ridge"
    },
    {
      "src": "https://images.unsplash.com/photo-1545696648-86c761bc5410?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHx8",
      "alt": "Mountain lake"
    },
    {
      "src": "https://images.unsplash.com/photo-1601469090980-fc95e8d95544?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE4fHx8ZW58MHx8fHx8",
      "alt": "Forest canopy"
    },
    {
      "src": "https://images.unsplash.com/photo-1607957333562-c760eee665ef?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDI2fHx8ZW58MHx8fHx8",
      "alt": "Starry night"
    }
  ]}
/>