euedujbarrios-ui
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

Upload queue

3 files
prompts.csvuploading
evals.jsonlready
screens.zipqueued

Inputs

Dataset Upload Queue

Intermediate

A file queue for prompt datasets, eval fixtures, and design reference uploads.

uploaddatasetqueue
View component

Inputs

AI Chat Input

Intermediate

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

aichatform
View component

Use environment variables in production.

Inputs

API Key Field

Beginner

A guarded credential input for settings screens, integrations, and developer tools.

apisecuritysettings
View component