Shadcn Dropzone

Ready to use File Upload Dropzone component, built with shadcn/ui and react-dropzone.

Demo: https://diragb.github.io/shadcn-dropzone

Installation

``bash npm install --save shadcn-dropzone`

or

`bash yarn add shadcn-dropzone`

`Usage`

`tsx import Dropzone from 'shadcn-dropzone';

// Use the default UI const DefaultUI = () => { return ( onDrop={(acceptedFiles: File) => { // Do something with the files }} /> ); }

// Or, pass a custom UI const CustomUI = () => { return ( onDrop={(acceptedFiles: File) => { // Do something with the files }} > {(dropzone: DropzoneState) => ( <> { dropzone.isDragAccept ? (

Drop your files here!


            ) : (
              
                
                  Upload files
                

              

            )
          }
          
            { dropzone.acceptedFiles.length } files uploaded so far.
          

        
      )}
    
  )
}

Make sure you have TailwindCSS set up in your project, as this component relies on them.

Props

Check out react-dropzone for all the props.

License

MIT