Zol-fuix-library NPM

ZOL FUIX Components Library

Preview

You can preview the components here https://zol-fuix-library.netlify.app/ .

Purpose

This UI library has been created to answer ZOL's needs in having modular and highly customizable components. We don't want to rely and other standard components libraries that can change either their philosophy or style or just won't be maintained by their creators.
This library rely on having a main css file imported in your App.js that would contain some basics variables below and other specified on each component documentation sheet.

Copy this in your main css file :

:root {
  /* COLORS */
  --color-primary-100: #ebedf3;
  --color-primary-300: #b1b6d1;
  --color-primary-500: #3b488b;
  --color-primary-700: #232b53;
  --color-secondary-100: #f1f2f8;
  --color-secondary-300: #c8cce3;
  --color-secondary-500: #7680ba;
  --color-secondary-700: #474d70;
  --color-accent-100: #f5edfc;
  --color-accent-300: #d5b6f4;
  --color-accent-500: #9648e3;
  --color-accent-700: #7136aa;
  --color-success-100: #f0faf0;
  --color-success-300: #c4eac2;
  --color-success-500: #6cca67;
  --color-success-700: #41793e;
  --color-error-100: #fbebed;
  --color-error-300: #eeafb8;
  --color-error-500: #d4364d;
  --color-error-700: #7f202e;
  --color-warning-100: #fdf0ea;
  --color-warning-300: #f6c3aa;
  --color-warning-500: #e8682b;
  --color-warning-700: #8b3e1a;
  --color-white: #fff;
  --color-black: #292a2d;
  --color-grey-100: #f9fafc;
  --color-grey-300: #cfd1d5;
  --color-grey-500: #888c97;
  --color-grey-700: #52545b;
}