Awesome Open Source
Awesome Open Source

Chonky logo
NPM package MIT license NPM downloads GitHub stars Chat on Discord


Chonky is constantly changing. Please create an issue if you have a problem or want to request a feature.

Chonky is a file browser component for React. It tries to recreate the native file browsing experience in your browser. This means your users can make selections, drag & drop files, toggle between List and Grid file views, use keyboard shortcuts, and much more!

Click here for documentation and examples.


  • [x] Backend-agnostic - files can come from any source (remote server, S3, virtual FS).
  • [x] Supports file sorting.
  • [x] Supports text search.
  • [x] Supports drag & drop.
  • [x] Mobile-friendly design.
  • [x] Supports image thumbnails.
  • [x] Supports keyboard shortcuts.
  • [x] Supports List and Grid file views.
  • [x] Supports common and custom file actions.
  • [x] Provides unique icons for each file extension.
  • [x] Supports file selections (excluding drag selection, for now).
  • [x] Supports loading animations and async thumbnail generation.
  • [x] Performs well with large file collections thanks to virtualization.

Quick usage

Add Chonky to your project:

npm install chonky

Use it in your React app:

import 'chonky/style/main.css';
import { FileBrowser, FileList, FileSearch, FileToolbar } from 'chonky';

export const ChonkyDemo = () => {
    const folderChain = React.useMemo(
        () => [
            { id: 'xXre', name: 'My Documents' },
            { id: 'BtrE', name: 'Websites' },

    const files = React.useMemo(
        () => [
            { id: '1eBr', name: 'index.html' },
            { id: 'xmFe', name: 'styles.css' },
            { id: 'vEgS', name: 'scripts.js' },
            { id: 'BVwA', name: 'favicon.ico' },
            { id: 'VsdE', name: 'robots.txt' },

    return (
        <FileBrowser files={files} folderChain={folderChain}>
            <FileToolbar />
            <FileSearch />
            <FileList />


Chonky preview


MIT © Tim Kuzhagaliyev 2020

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (9,181
react (4,840
reactjs (930
filesystem (183
file (130
virtualization (97
files (66
fs (28
thumbnails (27
file-explorer (19

Find Open Source By Browsing 7,000 Topics Across 59 Categories