WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Data Display

File manager

Data DisplayFile manager
File ListFolder
Live props
Content
rootLabel
Appearance
defaultView
tileSize
variant
tone
color
Layout
showTree
showBreadcrumb
State
loading
skeletonCount12
error
defaultSearch
defaultFolderId
Behavior
persistKey
confirmDelete
previewImages
accept
maxFileSizeNo limit
uploadShortcut
locale
Code
import { FileManager } from "@/components/ui/file-manager"

<FileManager />
Pro

v1.0.0·Added in 1.0.0

The documents of a company or a record: folders and files in a grid or a list, with a folder tree, uploads, moves, renames and bulk actions.

Click a file or a folder to select it, Cmd or Ctrl + click to add or remove one, Shift + click for a range, tick the checkbox that appears on hover, or click empty space to clear the selection; with anything selected the toolbar turns into the bulk bar (Move, Download, Delete, Select all). Double-click (or Enter) opens: a folder slides in, an image opens in the lightbox with the folder's other images, any other file goes to onOpen or its url in a new tab. Right-click or the ⋯ button opens the menu (Open, Rename, Move to, Download, your own entries, Delete); right-click on empty space offers New folder, Upload and Select all. Rename with F2, the menu or a slow second click on the name: the base name is selected, Enter saves, Escape cancels, and a rejected promise shows its message under the field. Drag files (the whole selection comes along) onto a folder, a crumb or a folder in the tree to move them; a folder never drops into itself, and the drag card shows a stop sign over a refused target. Drop files from the desktop anywhere on it to upload into the open folder, or onto a folder tile to upload there; pasting files uploads too, and the uploads panel in the bottom corner shows progress and rejected files, folds away and closes once nothing runs. Search looks through every folder, lists the results with their path and marks the matched letters. With the keyboard the files are one Tab stop: arrows move (Up and Down by a row of tiles), Home, End, Page Up and Page Down jump, letters jump to a name, Space toggles, Shift + arrows extend, Cmd or Ctrl + A selects all, Escape clears, Delete asks and removes, Backspace or Alt + Up goes to the parent folder, Shift + F10 opens the menu, and Cmd or Ctrl + Shift + N makes a folder from anywhere inside. On a phone it starts as a list under the folder's name as a large title with a back link: a tap opens, a long press starts selecting (checkboxes appear, taps add or remove, a floating bar offers Move, Download and Delete), hold and drag a selected file onto a folder to move it, and every menu, the Move dialog and the new folder dialog are bottom sheets. The layout follows the manager's own width, so in a narrow side panel it shows the compact list and two-column tiles even on a wide screen.

Add to a project

npx wingo-ui@latest add file-manager

Pro item: the CLI needs a Pro account. See plans

Dependencies

@dnd-kit/coremotionlucide-reactalert-dialogavatarbreadcrumbbuttoncheckboxcontext-menudialogdropdown-menuempty-statefile-uploadimage-lightboxinputprogresssegmented-controlskeletontoolbartooltiptree-viewuse-controllable-stateuse-localeuse-long-pressuse-media-queryuse-persisted-stateuse-selectionuse-shortcutfile-typesmotionnumber-formatrelative-timetext-matchtonesui-config

Files

  • components/ui/file-manager.tsx

See also

File ListFile UploadTree ViewImage LightboxBreadcrumb
PreviousFile ListNext Folder
  1. All files
  1. All files
2.4 GB of 10 GB

All files

2.4 GB of 10 GB
  • All files
    • Clients
    • Contracts 2026
    • Human resources
    • Invoices
    • Marketing
    • Quotes
Clients3 items · yesterday
Contracts 20265 items · 2 days ago
Human resources3 items · 1 wk. ago
Invoices4 items · 4 hr. ago
Marketing6 items · 4 days ago
Quotes4 items · 3 days ago
PPTXAcme CRM overview.pptx6.8 MB · 6 days ago
XLSXBudget 2027.xlsx84 KB · 28 min. ago
PDFEmployee handbook.pdf1.2 MB · 3 wk. ago
DOCXMaster agreement.docx212 KB · 2 wk. ago
Owner
Clients3 items · yesterday
yesterday
3 items
Liam Walker
Contracts 20265 items · 2 days ago
2 days ago
5 items
Ryan Brooks
Human resources3 items · 1 wk. ago
1 wk. ago
3 items
Ryan Brooks
Invoices4 items · 4 hr. ago
4 hr. ago
4 items
Olivia Bennett
Marketing6 items · 4 days ago
4 days ago
6 items
Mia Turner
Quotes4 items · 3 days ago
3 days ago
4 items
Noah Hayes
Acme CRM overview.pptx6.8 MB · 6 days ago
6 days ago
6.8 MB
Mia Turner
Budget 2027.xlsx84 KB · 28 min. ago
28 min. ago
84 KB
Olivia Bennett
Employee handbook.pdf1.2 MB · 3 wk. ago
3 wk. ago
1.2 MB
Ryan Brooks
Master agreement.docx212 KB · 2 wk. ago
2 wk. ago
212 KB
Ryan Brooks

Drag files onto a folder or a crumb to move them, drop files from your desktop to upload (over 10 MB fails), right-click for the menu.

confirmDelete: true · previewImages: true · accept: "" · maxFileSize: 0 · uploadShortcut: "" · persistKey: "" · skeletonCount: 12