Drag files in or use the Choose files button; chosen files are listed with remove buttons and every change is announced.
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Drag files here, or
PDF, PNG or JPG, up to 10 MB each.
Default, code
<FileDropZone
label="Upload receipts"
hint="PDF, PNG or JPG, up to 10 MB each."
acceptedFileTypes={['application/pdf', 'image/png', 'image/jpeg']}
/>Drag files here, or
SVG or PNG.
One file, code
<FileDropZone
acceptedFileTypes={['application/pdf', 'image/png', 'image/jpeg']}
label="Upload a logo"
allowsMultiple={false}
hint="SVG or PNG."
/>The 14 design tokens FileDropZone reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.brand-subtle | … | --sd-color-bg-brand-subtle |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.border.brand | … | --sd-color-border-brand |
| color.border.control | … | --sd-color-border-control |
| color.border.default | … | --sd-color-border-default |
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.default | … | --sd-color-icon-default |
| color.text.default | … | --sd-color-text-default |
| color.text.secondary | … | --sd-color-text-secondary |
| shape.radius-surface | … | --sd-shape-radius-surface |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.inset.xl | … | --sd-spacing-inset-xl |
| spacing.stack.sm | … | --sd-spacing-stack-sm |
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/file-drop-zoneThen import it
import { FileDropZone } from "@/components/ui/file-drop-zone"| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Upload files' | Heading inside the zone. Default "Upload files". |
hint | string | What is accepted, shown as text (e.g. "PDF or PNG, up to 10 MB each"). |
acceptedFileTypes | string[] | MIME types or extensions for the picker and drops, e.g. ["image/png", "application/pdf"]. |
allowsMultiple | booleanDefault true | |
onChange | (files: File[]) => void | Called with the full list after each change. |
className | string |
Screen readers announce "Upload receipts, drop zone" then "Choose files, button"; after a choice "2 files added".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
Shared patterns it ships with: 3.3.6 (files can be removed before submitting).
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 165 text runs: 0 below 7:1, lowest 10.58:1 |
| Target size | 28 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the drop zone (a keyboard drop target for pasted files) |
| Tab | Tab reaches Choose files: the keyboard and switch path to add files |
The Figma component is FileDropZone, with State (Default, Drop target, Focus). The Figma library isn’t published yet.
Figma to code: State (Default, Drop target, Focus; preview only); Label → label; Hint → hint when Show hint; nested Choose files → (FileTrigger).