Upload Dropzone
A drag-and-drop upload area for single- or multi-file uploads.
Preview
Drag and drop files here
You can upload 5 files. Each up to 25.0 MB.
Accepted Images, PDF, TXT.
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
Prop
Type
accept and maxFileSize are enforced client-side only. Always enforce
the same limits in upload.presignGuard on the server.
Set maxFiles above 1 for multi-file uploads. The dropzone shows file limits, max size, and accepted types below the main label.
Headless alternative
Use useUploadControls or useMultiUploadControls when you need full control over the UI.