Kelvin UI Components

Kelvin UI Components provides a set of reusable, high quality framework-agnostic UI components, this means you can use with React or if you prefer, the components are also available as W3C compliant WebComponents.

This is not just a library of UI components as it's also a style guide where you can see how the component looks and behaves by interacting with it, to showcase this we use Storybook, a free open-source tool.

Our Storybook is publicly available here

Migration Guide

If you are upgrading to the new design token system, please refer to the Migration Guide for detailed instructions on how to update your application.

Technological Stack

• Development: StencilJS
• Testing: Puppeteer & Jest

Getting Started

Development

To start a Stencil development server, run:

pnpm start

Production

To build the component for production, run:

pnpm build

To run the tests for the components, run:

pnpm test # or test:watch to watch for changes

Contributing

Component naming

When creating new components, always use kv as the tag prefix for your component (E.g: <kv-datepicker>).

Merge flow

1. Create a branch using dev as your source branch
2. Develop the component and write tests for it
3. Check if your code has any linting issues using pnpm lint
4. Run the tests using pnpm test
5. Create a pull request pointing to dev