Kelvin React 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

Installation

From the command prompt go to your app's root folder and execute:

pnpm install @kelvininc/react-ui-components --save

Getting Started

Include the fonts in index.js or index.tsx.

import '@kelvininc/react-ui-components/dist/assets/fonts/font-proxima-nova.css';

Now you are ready to use all available Kelvin UI Components. For example:

import { EActionButtonType, KvActionButton } from '@kelvininc/react-ui-components/client';

(...)

<KvActionButton
	type={EActionButtonType.PrimaryButton}
	text="My Button"
	smallSize="true"
	fixedWidth={250}
	onButtonClick={this.onButtonClick}>
</KvActionButton>

Including the global style file you can access our foundation design system definitions like colors, spacings and typography

@use '@kelvininc/react-ui-components/dist/assets/styles' as *;

Themes

Kelvin UI Components allows you to customize the theme by changing some CSS properties.

Example: Setting the Primary Color

:root {
	--kv-primary: #005cc7;
	--kv-primary-rgb: 0, 92, 199;
	--kv-primary-contrast: #fff;
	--kv-primary-contrast-rgb: 255, 255, 255;
	--kv-primary-dark: #0051af;
	--kv-primary-light: #ccdef4;
}

Caching

By default, the KvIcon and KvIllustration components require an SVG file with all the kv-icons available. The default file is svg-symbols.svg which is provided after installing this dependency. For caching purposes, it is also provided a symbols.${checksum}.svg file after installation. If you are caching those SVGs in your project you should use the latter.

import { initialize } from '@kelvininc/react-ui-components/client';

(...)

initialize({ symbolsFileName: 'symbols.6e51ea0e37926eff2f3ef11e64be70fa.svg' });

NOTE: If you are using pnpm as package manager in your project it's necessary to configure the postinstall script into package.json. Add "postinstall": "CUSTOM_INST=true node ./node_modules/@kelvininc/react-ui-components/.scripts/copy-icons.js". This will grant that svg symbols are copied to public directory.

Relative paths

By default the KvIcon and KvIllustration components will expect the svg-symbols.svg file to be served at the server root. This could not be your use-case if you're application is being served on a relative path, e.g, https://dashboard.com/clients/home. In this case you will need to tell the library the base path to your assets url, which you can achieve by doing the following in your index.js or index.tsx.

import { initialize } from '@kelvininc/react-ui-components/client';

(...)

initialize({ baseAssetsUrl: '/clients/' });

For more information, visit our Storybook.