Is Upload Progress free to use?

Yes. Upload Progress is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install Upload Progress?

One command: npx shadcn@latest add https://aicanvas.me/r/upload-progress.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Upload Progress for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is Upload Progress built with?

Upload Progress is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Upload Progress?

Common uses include Dashboard, File manager, and Onboarding. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix Upload Progress with AI?

Yes. Upload Progress ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.

Upload ProgressA collapsible file upload widget with a shimmer progress bar — indigo while uploading, amber on pause.

WidgetsDashboardFile managerOnboarding

Uploading 3 files

0% · 16s left

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/upload-progress

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

About Upload Progress

Upload Progress is a collapsible file-upload widget anchored to the corner of a viewport. The top bar shows a shimmer progress bar that runs indigo while uploading and amber when paused, and the expanded state breaks out each file into its own row with per-file progress, time remaining, and controls for pause, resume, refresh, and stop. Motion handles the collapse, the shimmer sweep, and the row-level transitions. It is the right component for file managers, asset upload flows, deploy dashboards, and any UI with long-running background tasks.

Built with

MotionTailwind CSS

Frequently asked questions

Is Upload Progress free to use?: Yes. Upload Progress is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
How do I install Upload Progress?: One command: npx shadcn@latest add https://aicanvas.me/r/upload-progress.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Upload Progress for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
What is Upload Progress built with?: Upload Progress is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Upload Progress?: Common uses include Dashboard, File manager, and Onboarding. Like every AI Canvas component, it is self-contained and drops into any React project.
Can I remix Upload Progress with AI?: Yes. Upload Progress ships with one comprehensive AI prompt written against the real source code. Open "Remix with AI" on this page to read and copy it into Claude, Cursor, ChatGPT, or any AI tool. Prompts are for remixing your own variation; for the exact component, install it with the one-command CLI.