Droppable File

Inputs

Dropzone with per-file preview (image thumbnail or generic icon) and a removable animated list.

Arraste imagens ou PDFs — pré-visualização por item (thumbnail real)

Drag and drop files here, or click to select

Instalação via CLI

$ npx kikitocn add droppable-file

Interno:

@/lib/utils@/lib/motion@/hooks/cn/use-drop-zonemotionlucide-react

Exemplo de uso

Droppable FileExample.tsx

import { DroppableFile } from "@/components/ui/cn/droppable-file/DroppableFile";

export function DroppableFileExample() {
  return (
    <DroppableFile />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`accept`	`string`	`'image/*,application/pdf'`	Tipos de arquivo aceitos
`multiple`	`boolean`	`true`	Permite seleção/drop de múltiplos arquivos
`onFilesChange`	`(files: File[]) => void`	—	Callback com a lista atual de arquivos
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Inputs

Carregando…