React

Cobalt allows developers to use web-components in React.

Install

npm install @cobalt-design-system/react-components

Usage

Note: All the Cobalt components are using Design Tokens so it is recommended to import them all in the project as global styles using the method of your choice. They are located in @cobalt-design-system/react-components/dist/tokens/index.css.

To use @cobalt-design-system/react-components in a React app the Component library module should be imported in the main.ts as below:

import { defineCustomElements } from '@cobalt-design-system/react-components'
// Register components as custom elements
defineCustomElements()

Any Cobalt component added in the html application will automatically load by using component name in PascalCase. Components should be declared in PascalCase like any other React component.

import { CobaltButton } from '@cobalt-design-system/react-components'

<CobaltButton label="Label" />