Components
Loading preview...
Image Uploader The ImageUploader is a highly interactive and accessible component for handling file uploads. It supports drag-and-drop, file selection through a dialog, and provides animated previews of the selected images. Built with framer-motion, it offers smooth animations for adding and removing files, enhancing the user experience. It's fully themeable using shadcn/ui CSS variables and includes validation for file types and size.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/image-uploaderimport * as React from "react";
import { ImageUploader } from "@/components/ui/image-uploader"; // Adjust the import path
export default function ImageUploaderDemo() {
// State to hold the files for the uploader
const [files, setFiles] = React.useState<File[]>([]);
return (
<div className="w-full max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
<div className="space-y-2 mb-6">
<h1 className="text-2xl font-bold tracking-tight">Image Uploader</h1>
<p className="text-muted-foreground">
A component to upload and preview images with animations.
</p>
</div>
<ImageUploader
files={files}
onChange={setFiles}
maxFiles={5}
maxSize={4} // in MB
accept="image/jpeg, image/png, image/webp"
/>
{/* Optional: Display file names to show state is managed correctly */}
{files.length > 0 && (
<div className="mt-6">
<h2 className="text-lg font-semibold">Uploaded Files:</h2>
<ul className="list-disc list-inside mt-2 text-sm text-muted-foreground">
{files.map((file, index) => (
<li key={index}>{file.name}</li>
))}
</ul>
</div>
)}
</div>
);
}