DOCSEARCHbyAlgolia
Submit Docs

Fuselage Design System

repository·main·Indexed 41 days ago

https://github.com/rocketchat/fuselage

Rocket.Chat's official design system and UI toolkit provided as a monorepo. It includes a core React components library (@rocket.chat/fuselage), design tokens (@rocket.chat/fuselage-tokens), specialized React hooks (@rocket.chat/fuselage-hooks), and utility packages for forms, icons, layout, and CSS-in-JS styling.

Tokens
75.2K
Snippets
309
Records
435
Agent score
50%

What's inside Fuselage

  2. Overview of the Fuselage Monorepo packages

    main

    Fuselage is a monorepo containing Rocket.Chat's design system and UI toolkit. It is composed of several specialized packages that allow developers to build consistent Rocket.Chat interfaces using React components, design tokens, and specialized hooks.

    Key packages include:

    • @rocket.chat/fuselage: The core React Components Library.
    • @rocket.chat/fuselage-forms: Component wrappers for improved ease of use and accessibility.
    • @rocket.chat/fuselage-hooks: React hooks specifically designed for the Fuselage design system.
    • @rocket.chat/fuselage-tokens: Design tokens that define the visual language of the system.
    • @rocket.chat/css-in-js: Toolset for transpiling and using CSS at runtime.
    • @rocket.chat/styled: A simple styled API for React components.
    • @rocket.chat/icons: The official Rocket.Chat icon set.
    • @rocket.chat/layout: Shared components for application layouts.
    • @rocket.chat/toastbar: The ToastBar component for notifications.
    • @rocket.chat/onboarding-ui: Components and functions for user onboarding experiences.

  3. Apply CSS classes using `rcx-` prefixed props

    main

    Fuselage uses the rcx- prefix for its CSS classes. To simplify styling, the Box component allows you to pass props prefixed with rcx-*, which are automatically converted into class names and appended to the element's className.

    This supports three patterns:

    1. Base component class: Using rcx-component adds rcx-component to the class list.
    2. Boolean modifiers: Using rcx-component--bool-modifier adds rcx-component--bool-modifier.
    3. String modifiers: Using rcx-component--string-modifier='value' adds rcx-component--string-modifier-value.
    <Box
  rcx-component
  rcx-component--bool-modifier
  rcx-component--string-modifier='value'
/>

  4. Manage form field metadata with Field and FieldProvider

    main

    The package uses a provider-consumer pattern to manage field metadata (labels, hints, errors, and descriptions) and ensure accessibility (ARIA attributes).

    FieldProvider

    Wrap your form or field sections in a FieldProvider to provide context for field metadata.

    Field

    Use the Field component to wrap an input and its associated metadata. It uses FieldContext to coordinate between the input and its labels/hints/errors.

    Field Metadata Components

    • FieldLabel: The primary label for the input.
    • FieldHint: Provides supplementary guidance.
    • FieldDescription: Provides detailed descriptions.
    • FieldError: Displays validation error messages.

    Field Context

    FieldContext allows components to interact with the field state. The FieldContextValue includes:

    • setDescriptor(type: LabelTypes, unregister?: boolean): Registers or unregisters a descriptor (e.g., 'hint', 'error').
    • setLabel(label: ReactNode): Sets the field label.
    • id: The unique identifier for the field.
    • fieldType: The current FieldType ('wrappedByLabel' | 'referencedByLabel' | 'referencedByInput').
    • emitAction(): Triggers an action within the field context.

  5. Build a Sidebar layout

    main

    The Sidebar system is composed of several specialized components to build complex navigation structures:

    • Sidebar: The main container. Use the collapsed prop to toggle its state.
    • SidebarItem: A single navigation item. Supports level for nesting and selected state.
    • SidebarLink: A specialized item for navigation links, supporting icon and badge.
    • SidebarAccordion & SidebarAccordionItem: Used to create collapsible groups of items within the sidebar.
    • SidebarGroupTitle: Provides headings for different sections of the sidebar.
    • SidebarDivider: A visual separator.
    • SidebarFooter: A container for content at the bottom of the sidebar.
    • SidebarBanner: A notification or call-to-action area within the sidebar with variants like info, success, warning, and danger.
    <Sidebar collapsed={false}>
  <SidebarGroupTitle title="Navigation" />
  <SidebarAccordion>
    <SidebarAccordionItem title="Settings">
      <SidebarLink icon="settings" to="/settings" />
    </SidebarAccordionItem>
  </SidebarAccordion>
  <SidebarDivider />
  <SidebarFooter>
    <SidebarFooterContent>Footer Content</SidebarFooterContent>
  </SidebarFooter>
</Sidebar>

  9. Install @rocket.chat/fuselage-forms

    main

    To use @rocket.chat/fuselage-forms, you must first install its peer dependencies, then add the package itself to your project.

    1. Install Peer Dependencies

    Ensure you have the following packages installed:

    • @rocket.chat/fuselage
    • @rocket.chat/fuselage-hooks
    • react
    • react-dom

    2. Install the Package

    Add @rocket.chat/fuselage-forms to your dependencies.

    # Install peer dependencies
npm i @rocket.chat/fuselage @rocket.chat/fuselage-hooks react react-dom
# or
yarn add @rocket.chat/fuselage @rocket.chat/fuselage-hooks react react-dom

# Install the forms package
npm i @rocket.chat/fuselage-forms
# or
yarn add @rocket.chat/fuselage-forms

  10. Use @rocket.chat/icons in your application

    main

    To use the icons, you must first import the required CSS. You can then use the icons either via the recommended Icon component or through standard HTML markup using the rcx-icon class.

    /* 1. Import the CSS first */
@import url('@rocket.chat/icons/dist/rocketchat.css');
    <!-- 2. Use the recommended Icon Component -->
<Icon name="hash" size="x20" />

<!-- OR use standard HTML markup -->
<i class="rcx-icon">hash</i>

  11. Install @rocket.chat/layout

    main

    To use @rocket.chat/layout, you must first install its peer dependencies, then add the package itself to your project.

    1. Install Peer Dependencies

    Install the following prerequisites:

    • @rocket.chat/fuselage
    • @rocket.chat/logo
    • react
    • react-dom
    • react-i18next

    2. Install @rocket.chat/layout

    Add the layout package to your dependencies.

    # Install peer dependencies
npm i @rocket.chat/fuselage @rocket.chat/logo react react-dom react-i18next

# Install the layout package
npm i @rocket.chat/layout