# `@rocket.chat/fuselage`
> Rocket.Chat's React Components Library
---
[](https://www.npmjs.com/package/@rocket.chat/fuselage/v/latest) [](https://www.npmjs.com/package/@rocket.chat/fuselage/v/next)  [](https://rocketchat.github.io/fuselage/fuselage)  
 
## Install
Firstly, install the peer dependencies (prerequisites):
```sh
npm i @rocket.chat/fuselage-hooks @rocket.chat/icons react react-dom react-virtuoso
# or, if you are using yarn:
yarn add @rocket.chat/fuselage-hooks @rocket.chat/icons react react-dom react-virtuoso
```
Add `@rocket.chat/fuselage` as a dependency:
```sh
npm i @rocket.chat/fuselage
# or, if you are using yarn:
yarn add @rocket.chat/fuselage
```
## Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues](https://github.com/RocketChat/fuselage/issues).
### Building
As this package dependends on others in this monorepo, before anything run the following at the root directory:
```sh
yarn build
```
### Linting
To ensure the source is matching our coding style, we perform [linting]().
Before commiting, check if your code fits our style by running:
```sh
yarn lint
```
Some linter warnings and errors can be automatically fixed:
```sh
yarn lint-and-fix
```
### Running tests
Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
```sh
yarn test
```
### Component stories
We develop and describe our visual components in the form of stories, manage by a tool called [Storybook](https://storybook.js.org/).
To start developing with Storybook, run:
```sh
yarn storybook
```
### Usage
To use the fuselage, you need to import the css first:
```tsx
import '@rocket.chat/fuselage/dist/fuselage.css';
const MyButton = () => {
return
