## Overview [#overview]
The **Dropzone** component provides an accessible drag-and-drop area for file uploads. Built on React Aria, it includes keyboard navigation, screen reader support, and visual feedback for drag states. It supports multiple file selection, size and count limits, and integrates with the animated folder interaction for enhanced visual feedback. File type filtering is handled by the browser's native file picker via the `accept` prop — no runtime MIME type validation is performed.
## Usage [#usage]
Dropzone provides the drag-and-drop behavior and file picker. Use [EmptyState](/primitives/empty-state) sub-components for the visual content inside.
```tsx
import {
Dropzone,
DropzoneAction,
DropzoneFolderAnimation,
EmptyStateMedia,
EmptyStateHeading,
EmptyStateTitle,
EmptyStateDescription,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx
console.log(files)}>
Drop files hereor click to browse
```
## Examples [#examples]
### With Action Button [#with-action-button]
Add a clickable button inside the dropzone to open the file picker dialog.
```tsx
import {
Button,
Dropzone,
DropzoneAction,
EmptyStateMedia,
EmptyStateHeading,
EmptyStateTitle,
EmptyStateDescription,
} from "@tilt-legal/cubitt-components/primitives";
import {
DropzoneFolderAnimation,
EmptyStateHeading,
EmptyStateTitle,
EmptyStateDescription,
} from "@tilt-legal/cubitt-components/primitives";
import {
CloudUpload } from "@tilt-legal/cubitt-icons/ui/outline";
console.log(files)}>
Drag and drop files
PDF,
DOCX,
or images up to 10MB
;
```
### With Folder Animation [#with-folder-animation]
Use the animated folder component for enhanced visual feedback. The folder opens when files are dragged over the dropzone. When an `accept` prop is set on the parent `Dropzone`,
file type icons are automatically shown on the document pages.
```tsx
import { Dropzone } from "@tilt-legal/cubitt-components/primitives";
console.log(files)}
>
Upload documents
PDF, Word, and Excel files accepted
;
```
## API Reference [#api-reference]
### Dropzone [#dropzone]
Root component that handles drag-and-drop and file selection.
| Prop | Type | Default | Description |
| ------------------ | --------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
| `onFileDrop` | `(files: File[]) => void` | - | Callback when valid files are dropped or selected |
| `onFilesRejected` | `(rejections: FileRejection[]) => void` | - | Callback when files are rejected (size or count) |
| `accept` | `string \| string[]` | - | Passed to the native file input to filter the browser's file picker. No runtime validation is performed. |
| `multiple` | `boolean` | `true` | Allow multiple file selection |
| `maxSize` | `number` | - | Maximum file size in bytes |
| `maxFiles` | `number` | - | Maximum number of files allowed |
| `isDisabled` | `boolean` | `false` | Disable the dropzone |
| `variant` | `"default" \| "minimal" \| "ghost"` | `"default"` | Visual variant style |
| `getDropOperation` | `(types) => DropOperation` | - | Custom function to determine drop operation |
| `onDrop` | `(e: DropEvent) => void` | - | Raw drop event callback (from React Aria) |
| `children` | `ReactNode` | - | Composable sub-components |
| `className` | `string` | - | Additional CSS classes |
#### FileRejection Type [#filerejection-type]
```tsx
type FileRejection = {
file: File;
reason: "size" | "count";
message: string;
};
```
### DropzoneFolderAnimation [#dropzonefolderanimation]
Animated folder component with documents that fan out when opened. Automatically responds to drag events when used inside a `Dropzone`.
| Prop | Type | Default | Description |
| ------------------- | --------- | ------- | --------------------------------------------------------------- |
| `showFileTypeIcons` | `boolean` | `true` | Show file type icons on documents based on parent `accept` prop |
| `className` | `string` | - | Additional CSS classes |
The folder automatically opens when files are dragged over the parent `Dropzone`.
### DropzoneAction [#dropzoneaction]
Wrapper for action buttons. Handles click propagation to open the file picker.
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | ----------------------------- |
| `children` | `ReactNode` | - | Button or interactive element |
| `className` | `string` | - | Additional CSS classes |