Shadcn Sonner Upload Progress

Toast with upload progress simulation. Built by composing Button, Progress. Uses sonner alongside the shadcn primitives. A free, open source shadcn sonner example you can install with npx shadcn@latest add @reui/c-sonner-10 and edit as your own code.

Toast with upload progress simulation

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A file card whose progress bar fills in place under one toast id, closing 3 seconds after it reaches 100

When to use

Brief feedback after an action, such as a created event or an archived message with Undo
Progress of async work in one toast that updates in place, from loading to success or failure
Rich notifications for messages, invites, deploys, builds and integrations, with their own buttons

When not to use

Progress kept in the page as a list, one row per item being sent: use the File Upload component
A status or warning that must stay on the page until the problem is fixed: use the Alert component
A choice the user has to make before the page can carry on: use the Alert Dialog component
An inbox panel that lists past activity for the user to review on demand: use the Sheet blocks

Agent notes

setInterval adds a random step of 5 to 19 every 500ms to fake progress; call toast.custom with the same id from your upload events
intervalRef holds only the latest timer, so a second click before 100 orphans the first; keep 1 handle per upload
The examples ship only the sonner package and never render Toaster; mount the shadcn sonner Toaster once near your app root or no toast shows

Third-party API docs

Sonner v2: API reference, docs

Markdownhttps://reui.io/components/sonner/c-sonner-10.md

MCPget_example("c-sonner-10")

Installnpx shadcn@latest add @reui/c-sonner-10

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Sonner Upload Progress

Dependencies

sonner

About Shadcn Sonner Upload Progress

What You Can Build With Shadcn Sonner Upload Progress

Composes Button, Progress, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-sonner-10
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Sonner Examples

Basic Basic toast notification.
With Description Toast notification with description.
Positions Toast positions
Variant Icons Toast variants with colored icons
Durations Toast duration options
Action Button Toast with action button
Promise Promise toast with loading state
Action & Cancel Toast with custom close and cancel buttons
Rich Content Toast with custom rich content
Status Alert Toast with status alert markup
Accent Border Custom accent border toast
Invert Success Custom invert success toast

Related Shadcn Component Categories

Sortable
Open-source shadcn sortable components for drag-and-drop lists, priority ranking, and reordering rows.
Spinner
Open-source shadcn spinner components for loading indicators, async actions, and button states.
Stepper
Open-source shadcn stepper components for multi-step forms, checkout flows, and onboarding.
Switch
Open-source shadcn switch components for settings toggles, preferences, and binary choices.
Table
Open-source shadcn table components for admin tables, data display, and responsive lists.
Tabs
Open-source shadcn tabs components for segmented content, settings views, and dashboard sections.

Frequently Asked Questions

When should I use Shadcn Sonner Upload Progress?

Use it for a file card whose progress bar fills in place under one toast id, closing 3 seconds after it reaches 100.

Shadcn Sonner as a whole fits:

Brief feedback after an action, such as a created event or an archived message with Undo
Progress of async work in one toast that updates in place, from loading to success or failure
Rich notifications for messages, invites, deploys, builds and integrations, with their own buttons

For progress kept in the page as a list, one row per item being sent, use the File Upload component. For a status or warning that must stay on the page until the problem is fixed, use the Alert component. For a choice the user has to make before the page can carry on, use the Alert Dialog component. For an inbox panel that lists past activity for the user to review on demand, use the Sheet blocks.

How do I install Shadcn Sonner Upload Progress?

Run npx shadcn@latest add @reui/c-sonner-10. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Sonner Upload Progress free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Sonner Upload Progress use?

It composes Button, Progress. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.