@quantumblack/carbon-ui NPM

Carbon UI is a set of React Components to be used for building Web Applications involving visualizing data.

master status

Prerequisites

Webpack (not required but highly recommended)

Installation and Access

Currently, the npm registry points to QuantumBlack's private Bitbucket repo. We are planning on Open Sourcing this library soon, where we will then host on a publicly-accessible URL.

In the meantime, please contact andy.shora@quantumblack.com for access.

Importing and Using Components

Within your JSX files, you can include components declaratively, once imported:

import { Dropdown, MenuOption } from '@quantumblack/carbon-ui';

const Nav = props => (
    <div className='nav'>
        <Dropdown theme='light'>
            <MenuOption primaryText='Menu Item One' value={1} />
            <MenuOption primaryText='Menu Item Two' value={2} />
        </Dropdown>
    </div>
);

Importing Styles

Once the carbon-ui module has been installed, you can import the stylesheet into your project by adding a link to the HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>Your app</title>
    <link rel="stylesheet" href="node_modules/@quantumblack/carbon-ui/dist/carbon-ui.min.css">
  </head>
  <body>
    ...
  </body>
</html>

Styles can be overridden via specificity within your application. For example, this will override the default display property of the Dropdown component:

.your-app > .cbn-dropdown {
    display: flex;
}

Contribution

If you wish to contribute to any carbon repo, please read our contribution guidelines

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago