File Manager
A cloud drive with breadcrumbs, grid/list views, multi-select bulk actions, sorting, a storage meter and a drag-and-drop upload area.
#files#app#storage
Install
$ npx shadcn@latest add https://chromotion.dev/r/file-manager.jsonThe page lands in app/file-manager/page.tsx and the components it uses are installed into components.
Components used
Installing the template installs these too.
- BreadcrumbNavigationBreadcrumb trail that collapses the middle into an expandable ellipsis.
- Dropdown MenuOverlays & feedbackDropdown menu with labels, checkbox items, shortcuts, destructive actions and typeahead.
- File DropzoneInputs & formsDrag-and-drop upload zone with type / size checks, file list and progress.
- Segmented ControlNavigationSegmented radio group with a sliding thumb, arrow keys, optional icons and two sizes.
- Usage MeterApplication UIStacked usage meter with a legend and warnings when nearing or exceeding the limit.