File upload

A complete file selection flow with constraints, progress, and error feedback.

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

Installation

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

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-upload/file-upload.tsx
- components/silicon-ui/file-upload/file-upload.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 { FileUpload } from "@/components/silicon-ui/file-upload/file-upload";

Prop	Type	Default
`accept`	`string`	—
`disabled`	`boolean`	`false`
`label`	`string`	`"Upload files"`
`description`	`string`	`"Drop files here or browse from your device."`
`multiple`	`boolean`	`true`
`maxSize`	`number`	—
`value`	`FileUploadItem[]`	—
`onChange`	`(files: FileUploadItem[]) => void`	—
`onUpload` Uploads each accepted file. Report progress from 0 to 100, resolve when done, or reject to mark the file as failed. Removing a file aborts its signal.	`(file: File, options: { onProgress: (percent: number) => void; signal: AbortSignal }) => Promise<void>`	—