@cobalt-design-system/web-components

Web-components

Cobalt is developed as web-components to make it Framework agnostic and browser native.

Usage

Vanilla HTML

Easiest way to start using Cobalt as web-components is by adding a script tag and stylesheet link:

<script type="module" src="https://cdn.jsdelivr.net/npm/@cobalt-design-system/web-components/dist/web-components/web-components.esm.js"></script>

<link href="https://cdn.jsdelivr.net/npm/@cobalt-design-system/web-components/dist/collection/tokens/index.css" rel="stylesheet">

Any Cobalt component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as document.createElement('cobalt-button').

JS apps

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

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/web-components/dist/collection/tokens/index.css.

In the root file of the app:

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

Any Cobalt component added to the webpage will automatically load.

Framework Bindings

The @cobalt-design-system/web-components package can be used in simple HTML, or by vanilla JavaScript without any framework at all. Cobalt also has packages that make it easier to integrate Cobalt into a framework's traditional ecosystem and patterns. (However, at the lowest-level framework bindings are still just using @cobalt-design-system/web-components).

• @cobalt-design-system/angular-components
• @cobalt-design-system/react-components
• @cobalt-design-system/vue-components