Components
File Upload
A hand-drawn dropzone that becomes more expressive when a file is dragged over it.
Click or drag files here
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/file-upload.jsonProps
PropTypeDefaultDescription
acceptstring—
Accepted file types.
classNamestring—
Additional Tailwind classes applied to the component.
disabledbooleanfalseDisables interaction.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
multiplebooleanfalseAllows handling multiple values or files.
onChange(files: FileList) => void—
Callback fired when the value changes.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
With hint and accept
Drop images here or click to browse
Click or drag files here
image/*
Multiple files
Click or drag files here
Accessibility
FileUpload still uses a native file input under the custom dropzone, so browser file picker behavior and keyboard activation remain available. Add surrounding copy that explains accepted file types and size limits when needed.
Examples
import { FileUpload } from "@/components/crumble/ui/file-upload";
<FileUpload />;