Up Components

https://up-components.up42.com

• Getting Started
• Using Up Components in your application
• Available Components
• Design System Tokens
• Contributing guidelines
• Troubleshooting

Up Components is a cross-team collaborative component library built on UP42's design system, Douglas. It allows us to reuse React components across different applications.

The package utilizes Storybook for organizing and documenting UI components. It is based on MUI for theming and most of the component APIs.

Getting Started

With npm

$ npm install @up42/up-components

With pnpm

pnpm add @up42/up-components

If you are using yarn you need to install peer dependencies manually. Make sure to install the correct version for each one.

$ yarn add @up42/up-components @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-data-grid-premium @mui/x-date-pickers-pro

Using Up Components in your application

Make sure to wrap your application with the top-level UpComponentsProvider and provide the MUI X Premium License Key in the licenseKey prop.

import { UpComponentsProvider, Button } from '@up42/up-components'

const App = () => (
  <UpComponentsProvider licenseKey={YOUR_MUI_LICENSE_KEY}>
    <Button>Hello!</Button>
  </UpComponentsProvider>
)

Available Components

Up Components is a custom library built on top of MUI. It offers a set of pre-styled, ready-to-use components.

Check out our Storybook to view the available components.

Note: Up Components proxies all MUI and MUI X components. You can refer to the existing MUI documentation for any component not yet covered in our Storybook. In case of conflicts, our custom documentation takes precedence over MUI's.

Design System Tokens

The Douglas design system tokens are exposed as part of Up Components. You can use them to style your components.

import { tokens } from '@up42/up-components'

For more information, check our tokens documentation or the system tokens repository.

Contributing guidelines

Please refer to our Contributing Guidelines for more info.

Troubleshooting

Please refer to our Troubleshooting documentation.