Fuselage Design System

Prev Next

Fuselage is Rocket.Chat’s design system for building consistent, accessible, and scalable user interfaces. It provides reusable components, guidelines, and tooling to help teams design and develop features efficiently.

Use this section to explore the system, understand its conventions, and contribute to its evolution.

Image

Monorepo

Explore the Fuselage monorepo to understand how the design system is structured and maintained.

Image

Testing Fuselage components

Understand recommended testing techniques to ensure component reliability.

Image

Conventions

Follow established guidelines to write clean, maintainable, and predictable UI code.

Image

Componentization

Learn how components are designed, organized, and used to build functional interfaces.

Image

Accessibility

Review accessibility principles and techniques for creating inclusive user experiences.

Image

Color palette

Use the defined color tokens to implement consistent visual styling across interfaces.

Image

Third-party libraries

This document lists a few third-party libraries you can integrate to craft an optimal UI.

Discover supported external libraries that integrate well with Fuselage.

Image

Contributing to Fuselage

Help improve the design system by contributing components, fixes, and enhancements.