Back to UI Components
Blocks

file-upload 3

A form section where users choose and send files from their device, placed inside forms that need attachments.

file-upload 3 is a real, MIT-licensed React + Tailwind block component from the open-source Watermelon UI library, in its file-upload set. Run the install command above with the shadcn CLI and it drops the component's actual source straight into your project.

It depends on react-icons, clsx, tailwind-merge, so make sure those are installed too.

The code you install is the component's own source — once it's in your repo, it's yours to restyle.

CategoryBlocks
LibraryWatermelon UI
SubcategoryFile-Upload
Dependenciesreact-icons, clsx, tailwind-merge
npx shadcn@latest add https://registry.watermelon.sh/r/file-upload-3.json

How to use it

  1. Run the install command above — the shadcn CLI drops the real component files into your project.
  2. Install the dependencies listed below it, if any.
  3. Import the component and restyle it with your own Tailwind tokens.
Compiled and written by VintuxAI from public sources.

Related in Blocks

Announcement 1A temporary banner that shares important updates with users while letting them continue their work without intAnnouncement 2A temporary notice that shares important updates with users while letting them continue what they were doing.Announcement 3A short banner that shares important updates with users while they continue working, appearing briefly within Announcement 4A small notice strip that conveys timely updates to people without pulling them away from what they are doing.Announcement 5A temporary banner that delivers important updates to users without pulling them away from what they are doingAnnouncement 6A short-lived banner that surfaces important updates to users while they continue working without interruptionAnnouncement 7A dismissible banner that shares timely updates at the top of a page without halting what the user is doing.Announcement 8A dismissible banner that surfaces time-sensitive updates at the top of a page without blocking what the user Announcement 9A short banner that shares urgent updates with users while they continue working, without blocking what they aauth 01A sign-in screen that checks user identity and controls entry to restricted parts of an app.
← Back to UI Components