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.

Monorepo

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

Testing Fuselage components

Understand recommended testing techniques to ensure component reliability.

Conventions

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

Componentization

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

Accessibility

Review accessibility principles and techniques for creating inclusive user experiences.

Color palette

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

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.

Contributing to Fuselage

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