File Picker Attachment Tray

A file picker that opens a native file dialog and lists the chosen files as removable attachment cards with previews, names, sizes and error messages for invalid files.

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

import FilePickerAttachmentTray from "@/components/ui/c-attachment-6";

export default function FilePickerAttachmentTrayDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <FilePickerAttachmentTray />
    </div>
  );
}