Document Upload Modal

Document upload modal with drag and drop support

$ npx @hritik-sharmaa/repeat-ui add commons-document-upload-modal
Category
Commons
Added
Sep 4, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
10MB
import CommonsDocumentUploadModal from "@/components/repeat-ui/commons-document-upload-modal/preview";

<CommonsDocumentUploadModal
  buttonText="Upload document"
  title="Upload Document"
  description="Choose a document to upload. Supported formats include PDF, Word, PowerPoint, Excel, and text files."
  accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt"
/>

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-document-upload-modal --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-document-upload-modal/.

    import CommonsDocumentUploadModal from "@/components/repeat-ui/commons-document-upload-modal/preview";

export default function Page() {
  return <CommonsDocumentUploadModal />;
}

Props

PropTypeDefaultDescription
buttonTextstring"Upload document"Label of the button that opens the modal.
titlestring"Upload Document"Modal heading.
descriptionstring"Choose a document to upload. Supported formats include PDF, Word, PowerPoint, Excel, and text files."Text under the heading.
acceptstring".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt"Allowed file extensions, comma separated.
maxSizeMBnumber10Largest allowed file, in megabytes.
accentColorstring"#2563eb"Button, dropzone and focus colour.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support
Command PaletteA ⌘K command menu with a gliding highlight