Dropzone

npx shadcn@latest add https://ui.saasflare.io/r/dropzone.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { Dropzone } from "@saasflare/ui"/** A drag-and-drop upload area restricted to images under 5 MB. */export function Demo() {    const [files, setFiles] = useState<File[]>([])    return (        <div className="flex flex-col gap-3 w-full max-w-md">            <Dropzone                accept="image/*"                maxSize={5 * 1024 * 1024}                onDrop={(accepted) => setFiles(accepted)}            />            {files.length > 0 && (                <ul className="text-sm text-muted-foreground">                    {files.map((file) => (                        <li key={file.name}>{file.name}</li>                    ))}                </ul>            )}        </div>    )}

"use client"import { Dropzone } from "@saasflare/ui"/** A custom render-prop body that reacts to the drag-active state. */export function Demo() {    return (        <div className="w-full max-w-md">            <Dropzone accept=".csv" onDrop={() => {}}>                {({ isDragActive }) => (                    <div className="flex flex-col items-center gap-1">                        <p className="font-medium text-foreground">                            {isDragActive ? "Release to import" : "Import contacts"}                        </p>                        <p className="text-xs text-muted-foreground">                            Drop a .csv export from your CRM                        </p>                    </div>                )}            </Dropzone>        </div>    )}