Importing the JS Component

Clay is available as the clay package in npm. The components are packaged as Component/Metal.js classes that provide a high fidelity component. You can import the Clay components in several ways depending on your Stack.

Installation from NPM

You can import the entire library of Clay components at once in your application, or you can import them individually as you need them.

• All components - clay package on npm.
• Separate components - clay- packages on npm.

All components

Using npm:

npm install clay --save

Or yarn:

yarn add clay

Separate components

Using npm:

npm install clay-badge --save

Or yarn:

yarn add clay-badge

ES2015

import {ClayBadge, ClayButton} from 'clay';

Manual Instantiation

You can render a Clay component on whatever element you want if you are not using a framework.

<div id="my-element"></div>

Import the component in your application and manually instantiate the component by passing the required properties and the id of the element.

import ClayBadge from 'clay-badge';

const badge = new ClayBadge(
    {
        label: 'My Badge'
    }, 
    '#my-element'
);

CDN

Once added to your page, the Clay components are accessible globally on the page with all components.

See Introduction.

<div id="element"></div>

<script type="text/javascript">
    var clayButton = new clay.ClayButton(
        {
            label: 'My Button'
        }, 
        '#element'
    );
</script>

Using Clay in soy and jsx

For more information see the advanced guides.