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 EditorSchema Builder
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 PlayerCarouselCSV ViewerDOCX ViewerExcel ViewerFile SystemImage CropperImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR 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
GalleryTheme

Media

File System

MediaFile SystemNew
Excel ViewerImage Cropper
Live props
Content
rootLabel
defaultFolderId
Behavior
defaultView
foldersFirst
searchScope
confirmDelete
accept
maxFileSizeNo limit
commandShortcut
locale
Appearance
iconSize
variant
radius
tone
color
folderColor
State
loading
error
Layout
showToolbar
showSidebar
defaultSidebarOpen
sidebarWidth200px
showRecents
defaultPreviewOpen
showPathBar
showStatusBar
showSearch
height640px
Code
import { FileSystem } from "@/components/ui/file-system"

<FileSystem />
ProNew

v1.0.0·Added in 1.4.0

A Finder-style file browser: sidebar, icons, list, columns and gallery views, preview panel and Quick Look on real documents.

Browse folders like in Finder. The sidebar lists favorites, locations (Recents and your roots) and colored tags; drag its edge to resize it, the panel button or Alt+⌘S hides it, and in a narrow frame it opens as a sheet. Four views: Icons (a grid of thumbnails), List (Name, Date modified, Size and Kind columns, click a header to sort, the chevron opens a folder in place), Columns (a column per folder level and a preview of the selected file; on phones one level at a time with a back row) and Gallery (a large live preview with a filmstrip). Every view is virtualized, so a folder of 10,000 files scrolls and sorts instantly. Click to select, Shift+click for a range, ⌘ / Ctrl+click to add, drag across empty space for a rectangle, ⌘A for all; arrows move, Shift+arrows extend, typing a name jumps to it. Double-click or Enter opens: folders open in place, images in the lightbox, other files in Quick Look; Space opens Quick Look on any file (PDF, Word, Excel, CSV, PowerPoint, images, video, audio, Markdown, JSON, code and text) and the arrows move through the folder. Back and forward (⌘[ ⌘]), Backspace or ⌘↑ go up, the path bar at the bottom jumps to any parent. Right-click, Shift+F10, a long press or the ⋯ of a row opens the actions: open, Get info (⌘I), rename (F2, Enter saves, Escape cancels), duplicate (⌘D), move to, copy to, copy and paste (⌘C, ⌘V, ⌥⌘V moves), download, copy path, favorites, tags and delete (⌘⌫, with a confirmation). Drag items onto a folder, a crumb or a sidebar row to move them (hold ⌥ to copy, rest on a folder to spring it open), onto a tag to tag them; drop files from the desktop to upload them. Search (⌘F) looks through the whole tree, accents and case ignored, with a 2 of 14 counter and Enter / Shift+Enter between results. The preview panel shows the selection's details. Menus, the search and dialogs become bottom sheets on phones, where rows are 44px or taller and a tap opens.

Add to a project

npx wingo-ui@latest add file-system

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

Dependencies

@tanstack/react-virtuallucide-reactalert-dialogaudio-playerbreadcrumbbuttoncode-blockcommand-menucontext-menucsv-viewerdialogdocx-viewerdropdown-menuexcel-viewerfile-typesfile-uploadimage-lightboxmarkdownpdf-viewerpopoverpptx-viewerrelative-timesheettext-matchtonestooltiptree-viewui-configuse-clipboarduse-controllable-stateuse-localeuse-media-queryuse-shortcutvideo-player

Files

  • components/ui/file-system.tsx

See also

File managerPDF ViewerExcel ViewerTree ViewFile List
PreviousExcel ViewerNext Image Cropper
Home

Favorites

Locations

Tags

Documents3 items
Media3 items
Photos9 items
ZIPBrand kit.zip18 KB
MDNorthwind README.md1 KB
  1. Home
1 selected · 5 items