Kaizen Component Library

Kaizen components live in two places:

1. The core Kaizen component library (@kaizen/component-library)
2. Individual draft component packages

To live in the core component library, a component must satisfy a number of quality checks including tests and accessibility standards.

All components that do not yet meet these standards live in their own individual draft component packages.

To find component usage docs in Storybook, click on the blue Show Info button at the bottom of a story for a component, revealing the name of the npm package for that component.

Add to a new project

Kaizen Component Library is already included in our main product repositories. If it's needed in a new repo, add @kaizen/component-library to your package.json file:

yarn add @kaizen/component-library

If you'd like to use a draft component, you include that package individually:

yarn add @kaizen/draft-well

Usage

You can import a Kaizen Component Library package inside your application using React.

React import example:

import { Button } from "@kaizen/component-library"

// draft component
import { Well } from "@kaizen/draft-well"

React usage example:

ReactDOM.render(
  <Card>
    <Button label="Example button" onClick={() => alert('Button clicked!')} />
  </Card>
  , document.querySelector('#app'),
);

You can also import Kaizen styles into SCSS files:

@import '~@kaizen/component-library/styles/type';

Contributing

To contribute to the component library, see the Contributing guidelines.