euedujbarrios-uiby edujbarrios
Back to components

Inputs

File Dropzone

A drag-and-drop upload surface for assets, screenshots, and UI reference files.

uploadfiledropzone

Installation

Copy and paste the code into your project.

Accessibility notes

The dropzone is a label wrapping a file input, making it keyboard and screen-reader reachable.

Preview accent

TypeScript
export function FileDropzone() {
  return (
    <label className="grid w-full max-w-sm cursor-pointer place-items-center rounded-lg border border-dashed border-[#40E0D0]/35 bg-[#40E0D0]/8 px-6 py-8 text-center transition hover:bg-[#40E0D0]/12">
      <span className="grid h-10 w-10 place-items-center rounded-full bg-[#40E0D0]/14 text-sm font-black text-[#d8fffb]">UP</span>
      <span className="mt-3 text-sm font-semibold text-white">Drop UI references here</span>
      <span className="mt-1 text-xs text-slate-400">PNG, JPG, or SVG up to 5MB</span>
      <input className="sr-only" type="file" />
    </label>
  );
}
Usage
<FileDropzone />

Related components

Inputs

AI Chat Input

Intermediate

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform
View component

Inputs

Neural Search Input

Beginner

A rounded search field for command palettes, component galleries, and prompt libraries.

searchcommandinput
View component

Inputs

Prompt Version Select

Beginner

A styled select control for pinning prompt versions in AI release workflows.

promptversionselect
View component