UploadThing Image Grid

Galleries 26

About

A multi-image upload grid with preview thumbnails, hover-to-remove buttons, upload progress spinners, and configurable columns.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds UploadThing Image Grid to your project and fits it to your theme.

Code

How UploadThing Image Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { UploadThingImageGrid } from "@/components/ui/uploadthing-image-grid";
import type { ImageItem } from "@/components/ui/uploadthing-image-grid";
import { useState } from "react";

export default function Default() {
  const [images, setImages] = useState<ImageItem[]>([
    {
      id: "1",
      url: "https://cdn.21st.dev/assets/mirror/ed/ed4ab55a3a934607472c1898ce98468e80c5f5bbdf2187ee34097893e0e85c08.jpg",
      name: "Portrait",
    },
    {
      id: "2",
      url: "https://cdn.21st.dev/assets/mirror/06/065ff9147bbaf9e0072aa6463c129d9f9d86bbce4cbd27b960738680ddc61c79.jpg",
      name: "Desk",
    },
  ]);

  const handleUpload = async (files: File[]): Promise<ImageItem[]> => {
    // Simulate an upload — in production wire this to UploadThing.
    await new Promise((resolve) => setTimeout(resolve, 800));
    return files.map((file, index) => ({
      id: `${Date.now()}-${index}`,
      url: URL.createObjectURL(file),
      name: file.name,
    }));
  };

  return (
    <div className="w-full max-w-md mx-auto p-6">
      <UploadThingImageGrid
        value={images}
        onChange={setImages}
        onUpload={handleUpload}
        columns={3}
        maxImages={9}
      />
    </div>
  );
}