Getting started

From an empty project to your first component in about two minutes. You need a bundler such as Vite, webpack or the one your framework ships with.

Install

The package brings its tokens and lit along as dependencies.

npm i @codechem/components

Fonts are included

The components bundle Kumbh Sans for text and Material Icons Round for icons. Importing a component registers both fonts, so there is nothing to load.

Import components

Importing registers the custom elements and adds the design tokens to the page once. Import everything:

import '@codechem/components';

Or only what you use, to keep the bundle small. Every component has its own entry point, listed on the Components page.

import '@codechem/components/button.js';
import '@codechem/components/text-input.js';

Use them

Write the tags in your markup like any HTML element. Attributes configure them, and they fire standard DOM events such as change and input.

<cc-text-input label="Work email" required></cc-text-input>
<cc-button>Create account</cc-button>

Frameworks

React 19+

Works with no setup. React passes attributes and properties to custom elements natively.

Vue

Tell the compiler that cc- tags are custom elements: isCustomElement: (tag) => tag.startsWith('cc-').

Angular

Add CUSTOM_ELEMENTS_SCHEMA to the component or module that uses them.

Icons

Put a Material Icons Round ligature in a component's icon slot. Keep aria-hidden so screen readers skip the icon's name.

<cc-button>
  <span slot="leading" class="material-icons-round" aria-hidden="true">add</span>
  New project
</cc-button>