File Upload

Files on paper, three ways: FileUpload is the way in (a dashed dropzone, a quiet text-only zone, or a compact button) with real click and drag-and-drop; FileChip is a small pill to pin above a chat composer; FileCard is the landed file with a live image preview or type icon, size, progress hairline and remove. While a file hovers the dropzone, the edge-light flares and the border warms toward the accent.

Draw

draw a card

$npx shadcn@latest add @clow/file-upload

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

Drop files here or click to browseImages, audio or PDF up to 25 MB

props

variant

multiple

label

hint

disabled

<FileUpload />

Examples

basic

Drop files here or click to browseImages, audio or PDF up to 25 MB

field-notes.pdf1.2 MBrelay-map.png840 KB

Attach

Props

prop	type	default
variant	dropzone \| quiet \| button	dropzone
multiple	boolean	true
label	text	Drop files here or click to browse
hint	text	Images, audio or PDF up to 25 MB
disabled	boolean	false