File Dropzone

Accessible drag-and-drop uploader with keyboard support, accept filtering, and customizable helper text.

Installation


pnpm dlx shadcn@latest add @basic-ui/file-dropzone

Usage

import { FileDropzone } from "@/components/basic-ui/file-dropzone"
 
export default function Example() {
  return

Checkbox Label

On This Page

Installation Usage Features Props Accessibility

Prop	Type	Default	Required	Description
`title`	`string`	`"Drop files here"`	No	Title text rendered at the top of the dropzone
`description`	`string`	`"Upload images in PNG, JPG, WebP, or AVIF formats (max 25 MB)."`	No	Supporting description below the title
`helperText`	`string`	`-`	No	Small helper paragraph rendered under the CTA
`icon`	`ReactNode`	Default upload glyph	No	Optional icon rendered inside the badge
`buttonLabel`	`string`	`"Browse files"`	No	Label for the call-to-action button
`accept`	`string \| string[]`	`-`	No	File types accepted by the input (`image/*`, `.png`, etc.)
`multiple`	`boolean`	`false`	No	Allows selecting multiple files when true
`disabled`	`boolean`	`false`	No	Disables pointer and keyboard interaction
`tone`	`'neutral' \| 'accent'`	`'neutral'`	No	Controls border/background emphasis
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	No	Adjusts padding and overall footprint
`onFilesSelected`	`(files: File[]) => void`	`-`	No	Callback fired with filtered file list after drop or selection

'use client';

import { useState } from 'react';

import { FileDropzone } from '@/registry/basic-ui/file-dropzone';

export function FileDropzoneBasic() {
  const [status, setStatus] = useState('Waiting for files…');

  return (
    <div className="flex flex-col gap-(--gap-4)">
      <FileDropzone
        accept={['image/png', 'image/jpeg', 'image/webp']}
        helperText="We keep the files in-memory only. Ideal for quick image uploads."
        onFilesSelected={(files) => {
          const count = files.length;
          const suffix = count === 1 ? 'file' : 'files';
          setStatus(`Ready to process ${count} ${suffix}.`);
        }}
      />
      <p className="text-sm text-grey-text-alpha-3-hover">{status}</p>
    </div>
  );
}