Blocks
Files - File Manager
File manager blocks: a grid with previews and selection, a sortable file table, a folder browser with breadcrumbs and a toolbar, a sidebar folder tree, recent files and a trash with restore and delete forever.
These blocks are the building pieces of a file manager. They take typed props with fictional files, folders and people, plus a now prop where they show relative dates, so the demos stay stable. The photos are placeholders from Unsplash.
Selection, sorting, renaming, deleting and restoring only change local state. Connect the handlers to your storage API, and use signed URLs for downloads. The folder tree uses the UiTree component, so arrow keys expand, collapse and move between folders.
Style One
File grid with image previews, a checkbox on every card, a bulk bar, search, sorting and inline rename from the card menu.
Style Two
File table with sortable columns, a star toggle, row selection and a bulk bar.
Style Three
Folder browser with breadcrumbs, a back button, a new folder dialog, a grid and list toggle and search.
Style Four
Sidebar folder tree with item counts and a storage meter. The selected folder drives the file list.
Style Five
Recent files grouped by day with a quick access row of folders, a type filter and star and share actions.
Style Six
Trash with days left for each file, restore, delete forever and empty trash, all behind confirmation dialogs.
Features
Comprehensive feature section components with multiple layouts, animations, and styles. Features can also be used as service sections for showcasing offerings, capabilities, and benefits.
Files - Sharing
File sharing blocks: a share dialog that invites people and sets roles, an access list with pending invitations and undo, public link settings with a password and an expiry and a file detail panel with tabs, tags and actions.