Carbon UI is a set of React Components to be used for building Web Applications involving visualizing data.
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