Shadcn Dropzone

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

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

Installation

1npm install --save shadcn-dropzone

or

1yarn add shadcn-dropzone

Usage

1import Dropzone from 'shadcn-dropzone';
2
3// Use the default UI
4const DefaultUI = () => {
5  return (
6    <Dropzone
7      onDrop={(acceptedFiles: File) => {
8        // Do something with the files
9      }}
10    />
11  );
12}
13
14// Or, pass a custom UI
15const CustomUI = () => {
16  return (
17    <Dropzone
18      onDrop={(acceptedFiles: File) => {
19        // Do something with the files
20      }}
21    >
22      {(dropzone: DropzoneState) => (
23        <>
24          {
25            dropzone.isDragAccept ? (
26              <div className='text-sm font-medium'>Drop your files here!</div>
27            ) : (
28              <div className='flex items-center flex-col gap-1.5'>
29                <div className='flex items-center flex-row gap-0.5 text-sm font-medium'>
30                  Upload files
31                </div>
32              </div>
33            )
34          }
35          <div className='text-xs text-gray-400 font-medium'>
36            { dropzone.acceptedFiles.length } files uploaded so far.
37          </div>
38        </>
39      )}
40    </Dropzone>
41  )
42}

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