Loading...
Installation
Usage
import { FileDropzone } from "@/components/basic-ui/file-dropzone"
export default function Example() {
return
Accessible drag-and-drop uploader with keyboard support, accept filtering, and customizable helper text.
import { FileDropzone } from "@/components/basic-ui/file-dropzone"
export default function Example() {
return
| 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 |
role="button" with keyboard triggers (Enter / Space).Waiting for files…
'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>
);
}