Progress Download Button
Downloads via fetch with a live progress fill and cancellation support.
Preview
Install
npm i @dimah-s3/ui shadcn@import "shadcn/tailwind.css";
@import "@dimah-s3/ui/styles.css";
/* + shadcn theme variables */
shadcn theme variables must be in globals.css.
Mount the toaster once in your root layout:
import { Toaster } from "@dimah-s3/ui";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
);
}Already using shadcn toast for your own messages? Mount both — rename one import (Toaster as DimahToaster). They are independent; your code keeps import { toast } from "@/components/ui/toast" and toast.add({ … }).
Props
Headless alternative
Use useDownload for custom download UIs.