Drop

Release dragged object onto a target.

Drop files here

drop target active{{unless dragOver}}rest state — drag a file over the dashed zone

html

<div class="drop-demo" data-acceptance="accept" style="--accent:#A8E6C1;">
  <div class="drop-demo__zone is-over">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 21h16" /></svg>
    <p>Drop files here</p>
  </div>
  <p class="drop-demo__caption">drop target active{{unless dragOver}}rest state &mdash; drag a file over the dashed zone

tailwind

<div class="drop-tw drop-tw--accept" style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <div class="drop-tw__zone is-over rounded-xl border-2 border-dashed text-center px-4 py-6.5" style="border-color:#24143033;color:#241430aa">
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 21h16" /></svg>
    <p class="mt-2 mb-0 text-[13px]">Drop files here</p>
  </div>
  <p class="mt-2.5 text-xs text-[#241430aa]">drop target active{{unless dragOver}}rest state &mdash; drag a file over the dashed zone

react

export function DropZone({
  zoneLabel = "Drop files here",
  dragOver = true,
  acceptance = "accept",
  accent = "#A8E6C1",
}) {
  const overStyle = dragOver
    ? (acceptance === "reject"
        ? { borderColor: "#b3261e", background: "#b3261e14", color: "#b3261e" }
        : { borderColor: accent, background: "color-mix(in srgb, " + accent + " 16%, #FAF7F2)", color: "#241430" })
    : {};
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ border: "2px dashed #24143033", borderRadius: 12, padding: "26px 16px", textAlign: "center", color: "#241430aa", ...overStyle }}>
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 21h16" /></svg>
        <p style={{ margin: "8px 0 0", fontSize: 13 }}>{zoneLabel}</p>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{dragOver ? "drop target active" : "rest state \u2014 drag a file over the dashed zone"}</p>
    </div>
  );
}