File Uploader

A clean, modern, and accessible file upload component for React/Next.js. Features drag-and-drop support, multi-file selection with badge-style display, single-file image preview, animated upload progress, and a compact, monochromatic design. Includes accessible remove actions, file name truncation, and a scrollable badge list for large selections.

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

import { Component } from "@/components/ui/file-uploader";

export default function DemoOne() {
  return <Component />;
}