# 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:


```html
<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

```bash
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:

```ts
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](https://www.npmjs.com/package/@cobalt-design-system/angular-components)
* [@cobalt-design-system/react-components](https://www.npmjs.com/package/@cobalt-design-system/react-components)
* [@cobalt-design-system/vue-components](https://www.npmjs.com/package/@cobalt-design-system/vue-components)