File dropzone

A generous target for dropping one or more files.

$npx shadcn@latest add @silicon-ui/file-dropzone

fieldfiles

Installation

$npx shadcn@latest add @silicon-ui/file-dropzone

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/file-dropzone/file-dropzone.tsx
- components/silicon-ui/file-dropzone/file-dropzone.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { FileDropzone } from "@/components/silicon-ui/file-dropzone/file-dropzone";

Prop	Type	Default
`accept`	`string`	—
`multiple`	`boolean`	`true`
`maxFiles`	`number`	`5`
`onFilesChange`	`(files: File[]) => void`	—
`label`	`string`	`"Add files"`
`description`	`string`	`"Drop files here or choose from your device"`
`defaultItems` Rows present at mount, such as files uploaded earlier. They render in place without an entrance.	`FileDropzoneItem[]`	—
`onUpload` Uploads each added file. Without it the list shows plain selections.	`FileDropzoneUpload`	—
`maxSize` Files above this many bytes fail with a size reason and never upload.	`number`	—
`listPlacement` Render the file list under the drop target or inside its edge.	`"below" \| "inside"`	`"below"`
`note` Replaces the small line under the description.	`string`	—
`dropLabel` Label while files hover over the target.	`string`	—
`compactAt` Once the list holds this many files, the prompt folds to a slim bar so the list has room. A file dragged over brings the icon back.	`number`	—