Skip to content

owlpro/chonky2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Chonky2 Logo
NPM package MIT license NPM downloads GitHub stars

Chonky2

Chonky2 is a modernized and optimized fork of Chonky β€” a powerful React file browser component that recreates the native file explorer experience in the browser.

Users can drag & drop, select multiple files, toggle between grid and list views, and use keyboard shortcuts seamlessly.


πŸš€ What's New

βš›οΈ React 19.2 Support

  • Fully compatible with React 19.2 and the new JSX runtime.
  • Improved internal architecture for better performance and tree-shaking.

🎨 Material UI 6.5

  • Updated to @mui/material v6.5.0.
  • Refactored styling system to align with MUI’s Styled Engine.

πŸͺΆ Built-in Lucide Icon Pack

  • FontAwesome removed completely.
  • Icons are now powered by Lucide and bundled directly within the package.
  • No external icon imports or configuration required.

πŸ“¦ Package Modernization

  • New package name: chonky2
  • Fully compatible with Vite and ESM
  • Reduced dependency footprint and improved build times

πŸ“¦ Installation

Install Chonky2 and its compatible peer dependencies:

npm install chonky2

npm install \
    @emotion/react@^11.14.0 \
    @emotion/styled@^11.14.1 \
    @mui/material@^6.5.0 \
    @mui/styled-engine-sc@^6.4.9 \
    styled-components@^6.1.14

Note: Ensure you match these versions for consistent styling and compatibility.


βš™οΈ Quick Start

import { FileBrowser, FileList, FileToolbar } from 'chonky2';

const files = [
  { id: 'file1', name: 'Document.pdf' },
  { id: 'file2', name: 'Photo.png' },
];

export default function Example() {
  return (
    <FileBrowser files={files}>
      <FileToolbar />
      <FileList />
    </FileBrowser>
  );
}
  • No need to import icons β€” they are included automatically.
  • Works seamlessly with MUI v6.5 components and themes.

πŸ” Migration from Original Chonky

1️⃣ Uninstall the old package:

npm uninstall chonky

2️⃣ Install Chonky2:

npm install chonky2

3️⃣ Update your imports:

- import { FileBrowser } from 'chonky';
+ import { FileBrowser } from 'chonky2';

4️⃣ Remove all FontAwesome or external icon imports β€” they are now handled internally via Lucide.


🧩 Compatibility

Library Version
React 19.2
MUI 6.5.x
TypeScript Supported (types included)

πŸ“Έ Preview

Chonky2 preview


πŸ“š Documentation

Documentation for Chonky2 is currently being updated.
Until then, refer to the original Chonky documentation.
Most APIs remain backward-compatible.


πŸ“ Changelog

6.5.5 (2025-10-15)

  • Upgraded to React 19.2
  • Migrated to MUI 6.5 with new styled engine
  • Removed FontAwesome and added built-in Lucide Icon Pack
  • Improved ESM and Vite compatibility
  • Reduced bundle size and dependencies

🧾 License

MIT Β© Tim Kuzhagaliyev
Maintained and upgraded by Mahdi Amiri


πŸ”— Useful Links


πŸ’Ž Sponsored by

Vahdat Optic Logo
Developed and enhanced with the support of
Vahdat Optic
https://vahdatoptic.com

About

A File Browser component for React ^19.2 and Mui ^6.5 😸

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors