@kelvininc/react-ui-components

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/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';

(...)

<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

@import '@kelvininc/react-ui-components/assets/styles/globals.scss';

Themes

Kelvin UI Components have two predefined themes StyleMode.Night and StyleMode.Light (StyleMode.Night is applied by default) that can be applied on library startup. For that you need pass the desired theme to the library configuration in your index.js or index.tsx.

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

(...)

initialize({styleMode: StyleMode.Light});

In addition, you can 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';

(...)

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';

(...)

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

For more information, visit our Storybook.