- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
File Picker
Compound file-picker dialog with sidebar, search, breadcrumb, list, preview column, dropzone, and footer. Framed sizes (basic/medium/large) follow the DS kit; FilePickerView embeds the same chrome without a dialog.
Import
Live Demo
File upload with drag-and-drop support and previews.
With sidebar
Simple (no sidebar)
With dropzone
Framed large (with preview)
Item variants
Simple
Big Icon
Tab into items above to see the focus ring (sidebar-ring/50).
Embedded view (no dialog)
Embedded picker
Rendered inline — no Radix dialog
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "xl" | "basic" | "medium" | "large" | "default" | FilePickerContent size. basic/medium/large render the DS-kit framed chrome (header + inset layout + footer); medium/large add the floating close button when showCloseButton is set |
| showCloseButton | boolean | false | Render the close button on FilePickerContent |
| leftSlot | ReactNode | — | FilePickerFooter left slot (e.g. "Upload to" label + destination dropdown) |
| children | ReactNode | — | FilePickerAside content: a generic trailing region — compose a preview, metadata or actions |
| accept | string | — | FilePickerDropzone accepted file types (e.g., '.pdf,.doc') |
| multiple | boolean | false | FilePickerDropzone: allow multiple file selection |