https://github.com/rocketchat/fuselage

React port of Rocket.Chat's design system, Fuselage
https://github.com/rocketchat/fuselage

design-system hacktoberfest monorepo react rocketchat

Last synced: about 2 months ago
JSON representation

React port of Rocket.Chat's design system, Fuselage

• Host: GitHub
• URL: https://github.com/rocketchat/fuselage
• Owner: RocketChat
• License: mit
• Created: 2019-05-22T03:08:41.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2026-04-27T22:10:07.000Z (2 months ago)
• Last Synced: 2026-04-27T22:17:45.747Z (2 months ago)
• Topics: design-system, hacktoberfest, monorepo, react, rocketchat
• Language: TypeScript
• Homepage: https://rocketchat.github.io/fuselage/
• Size: 332 MB
• Stars: 153
• Watchers: 14
• Forks: 247
• Open Issues: 137
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

          


  

    

  



Fuselage Monorepo


![Issues](https://img.shields.io/github/issues/RocketChat/fuselage?style=flat-square)

![Pull requests](https://img.shields.io/github/issues-pr/RocketChat/fuselage?style=flat-square)

![GitHub commit activity](https://img.shields.io/github/commit-activity/m/RocketChat/fuselage?style=flat-square)

| Package | Description | Version | Dependencies |

|---------|-------------|---------|--------------|

| 📦 [`@rocket.chat/css-in-js`](/packages/css-in-js) | Toolset to transpile and use CSS on runtime | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-in-js?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-in-js) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-in-js?style=flat-square) |

| 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) |

| 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) |

| 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |

| 📦 [`@rocket.chat/fuselage-forms`](/packages/fuselage-forms) | A set of component wrappers to provide ease of use and accessibility out-of-box. | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-forms?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-forms) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-forms?style=flat-square) |

| 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |

| 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) |

| 📦 [`@rocket.chat/fuselage-tokens`](/packages/fuselage-tokens) | Design tokens for Fuselage, Rocket.Chat's design system | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-tokens?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-tokens) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-tokens?style=flat-square) |

| 📦 [`@rocket.chat/icons`](/packages/icons) | Rocket.Chat's Icons | [![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/icons) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/icons?style=flat-square) |

| 📦 [`@rocket.chat/layout`](/packages/layout) | Shared Application Layout Components | [![npm](https://img.shields.io/npm/v/@rocket.chat/layout?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/layout) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/layout?style=flat-square) |

| 📦 [`@rocket.chat/logo`](/packages/logo) | Rocket.Chat logo package | [![npm](https://img.shields.io/npm/v/@rocket.chat/logo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/logo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/logo?style=flat-square) |

| 📦 [`@rocket.chat/memo`](/packages/memo) | Memoization utilities | [![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/memo) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/memo?style=flat-square) |

| 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) |

| 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) |

| 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) |

| 📦 [`@rocket.chat/storybook-dark-mode`](/packages/storybook-dark-mode) | Toggle between light and dark mode in Storybook (Rocket.Chat fork) | [![npm](https://img.shields.io/npm/v/@rocket.chat/storybook-dark-mode?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/storybook-dark-mode) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/storybook-dark-mode?style=flat-square) |

| 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) |

| 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) |

| 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) |