@carbon-labs/react-ui-shell

The @carbon-labs/react-ui-shell package extends UI Shell components from @carbon/react, providing additional enhancements while maintaining compatibility.

📦 Getting started

To install @carbon-labs/react-ui-shell in your project, you will need to run the following command using npm:

npm install -S @carbon-labs/react-ui-shell @carbon/react

If you prefer Yarn, use the following command instead:

yarn add @carbon-labs/react-ui-shell @carbon/react

⚡ Usage

To use this package you will need to import components from both @carbon/react and @carbon-labs/react-ui-shell to compose the UI Shell. The following components are provided by @carbon-labs/react-ui-shell:

SideNav
SideNavItems
SideNavLink
SideNavMenu
SideNavMenuItem
HeaderPopover
HeaderPopoverActions
HeaderPopoverButton
HeaderPopoverContent
HeaderDivider
SharkFinIcon

import { SideNav } from '@carbon-labs/react-ui-shell/es/index';
import { Header } from '@carbon/react';

function MyComponent() {
  return (
    <Header>
      <SideNav>...</SideNav>>
    </Header>
  );
}

SCSS

Import the styles from @carbon/react and @carbon-labs/react-ui-shell in your stylesheet:

@use '@carbon/react' with (
  $font-path: '@ibm/plex'
);
@use '@carbon-labs/react-ui-shell/scss/ui-shell';

Storybook

You can explore the available components, see different configuration options, and learn how to compose them in Storybook.

🙌 Contributing

Want to contribute to @carbon-labs? Read through the Carbon Labs contribution section before diving into our developer guide:

Developer Guide

📖 Changelog

See the latest updates and version history in the changelog.

📝 License

Licensed under the Apache 2.0 License.

IBM Telemetry

This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.