@ezbiz/react-components

These components are inspired by Material UI and work seamlessly with Next.js or regular React application right out of the box.

For, vite user

Make sure you have process.env added into vite.config.ts

export default defineConfig({

  define: {
    process: {
      env: {
        
      }
    }
  },
  // your existing configuration
});

Installation

 npm install @ezbiz/react-components

Demo

React Component

Theme

These are the CSS variables used by the library, which you can override to customize your theme. While we may introduce more themes in the future, our current priority is adding more React components to the library. We're also working on dark mode support, which will be available soon.

/* Light mode */
:root {
  --font-primary: 'Nunito Sans';
  --font-secondary: 'Nunito Sans';
  --gray1: 245, 246, 247;
  --gray2: 234, 236, 238;
  --gray3: 213, 218, 221;
  --gray4: 169, 180, 190;
  --gray5: 131, 150, 168;
  --gray6: 91, 115, 139;
  --gray7: 71, 94, 117;
  --gray8: 53, 74, 95;
  --gray9: 34, 53, 72;
  --gray10: 26, 39, 51;
  --gray11: 18, 23, 28;

  --red1: 255, 234, 244;
  --red2: 255, 213, 234;
  --red3: 255, 178, 210;
  --red4: 255, 140, 178;
  --red5: 255, 92, 119;
  --red6: 238, 57, 57;
  --red7: 210, 10, 10;
  --red8: 170, 8, 8;
  --red9: 132, 6, 6;
  --red10: 90, 4, 4;
  --red11: 53, 0, 0;


  --mango1: 255, 248, 214;
  --mango2: 255, 243, 184;
  --mango3: 255, 223, 114;
  --mango4: 255, 201, 51;
  --mango5: 255, 179, 0;
  --mango6: 231, 101, 0;
  --mango7: 169, 62, 0;
  --mango8: 169, 62, 0;
  --mango9: 141, 42, 0;
  --mango10: 109, 25, 0;
  --mango11: 69, 11, 0;

  --green1: 245, 250, 229;
  --green2: 235, 245, 203;
  --green3: 189, 233, 134;
  --green4: 151, 221, 64;
  --green5: 93, 193, 34;
  --green6: 54, 164, 29;
  --green7: 24, 137, 24;
  --green8: 37, 111, 58;
  --green9: 30, 89, 47;
  --green10: 22, 67, 35;
  --green11: 14, 43, 22;

  --teal1: 218, 253, 245;
  --teal2: 194, 252, 238;
  --teal3: 100, 237, 210;
  --teal4: 44, 224, 191;
  --teal5: 0, 206, 172;
  --teal6: 4, 159, 154;
  --teal7: 7, 131, 143;
  --teal8: 4, 108, 122;
  --teal9: 3, 86, 99;
  --teal10: 2, 65, 76;
  --teal11: 1, 41, 49;


  --blue1: 235, 248, 255;
  --blue2: 209, 239, 255;
  --blue3: 166, 224, 255;
  --blue4: 137, 209, 255;
  --blue5: 77, 177, 255;
  --blue6: 27, 144, 255;
  --blue7: 0, 112, 242;
  --blue8: 0, 87, 210;
  --blue9: 0, 64, 176;
  --blue10: 0, 42, 134;
  --blue11: 0, 20, 74;

  --indigo1: 241, 236, 255;
  --indigo2: 226, 216, 255;
  --indigo3: 211, 182, 255;
  --indigo4: 184, 148, 255;
  --indigo5: 155, 118, 255;
  --indigo6: 120, 88, 255;
  --indigo7: 93, 54, 255;
  --indigo8: 71, 12, 237;
  --indigo9: 44, 19, 173;
  --indigo10: 28, 12, 110;
  --indigo11: 14, 6, 55;

  --pink1: 255, 249, 250;
  --pink2: 255, 220, 243;
  --pink3: 255, 175, 237;
  --pink4: 255, 138, 240;
  --pink5: 246, 90, 242;
  --pink6: 243, 29, 237;
  --pink7: 204, 0, 220;
  --pink8: 161, 0, 194;
  --pink9: 120, 0, 164;
  --pink10: 81, 0, 128;
  --pink11: 40, 0, 74;

  --raspberry1: 255, 240, 245;
  --raspberry2: 255, 220, 232;
  --raspberry3: 254, 203, 218;
  --raspberry4: 254, 173, 200;
  --raspberry5: 254, 131, 174;
  --raspberry6: 250, 79, 150;
  --raspberry7: 223, 18, 120;
  --raspberry8: 186, 6, 108;
  --raspberry9: 155, 1, 93;
  --raspberry10: 113, 1, 75;
  --raspberry11: 81, 1, 54;

  --alpha-1: 0.04;
  --alpha-2: 0.08;
  --alpha-3: 0.16;
  --alpha-4: 0.20;
  --alpha-5: 0.24;
  --alpha-6: 0.28;
  --alpha-normal: 0.32;

  --primary-lightest: rgb(var(--indigo1));
  --primary-lighter: rgb(var(--indigo3));
  --primary-light: rgb(var(--indigo5));
  --primary-main: rgb(var(--indigo6));
  --primary-dark: rgb(var(--indigo7));
  --primary-darker: rgb(var(--indigo9));
  --primary-darkest: rgb(var(--indigo11));


  --info-lightest: rgb(var(--blue1));
  --info-lighter: rgb(var(--blue3));
  --info-light: rgb(var(--blue5));
  --info-main: rgb(var(--blue6));
  --info-dark: rgb(var(--blue7));
  --info-darker: rgb(var(--blue9));
  --info-darkest: rgb(var(--blue11));

  --success-lightest: rgb(var(--green1));
  --success-lighter: rgb(var(--green3));
  --success-light: rgb(var(--green5));
  --success-main: rgb(var(--green6));
  --success-dark: rgb(var(--green7));
  --success-darker: rgb(var(--green9));
  --success-darkest: rgb(var(--green11));

  --warning-lightest: rgb(var(--mango1));
  --warning-lighter: rgb(var(--mango3));
  --warning-light: rgb(var(--mango5));
  --warning-main: rgb(var(--mango6));
  --warning-dark: rgb(var(--mango7));
  --warning-darker: rgb(var(--mango9));
  --warning-darkest: rgb(var(--mango11));

  --error-lightest: rgb(var(--red1));
  --error-lighter: rgb(var(--red3));
  --error-light: rgb(var(--red5));
  --error-main: rgb(var(--red6));
  --error-dark: rgb(var(--red7));
  --error-darker: rgb(var(--red9));
  --error-darkest: rgb(var(--red11));

  --primary-main-alpha8: rgba(var(--indigo6), var(--alpha-1));
  --primary-main-alpha12: rgba(var(--indigo6), var(--alpha-2));
  --primary-main-alpha16: rgba(var(--indigo6), var(--alpha-3));
  --primary-main-alpha24: rgba(var(--indigo6), var(--alpha-4));
  --primary-main-alpha32: rgba(var(--indigo6), var(--alpha-5));
  --primary-main-alpha48: rgba(var(--indigo6), var(--alpha-6));

  --info-main-alpha8: rgba(var(--blue6), var(--alpha-1));
  --info-main-alpha12: rgba(var(--blue6), var(--alpha-2));
  --info-main-alpha16: rgba(var(--blue6), var(--alpha-3));
  --info-main-alpha24: rgba(var(--blue6), var(--alpha-4));
  --info-main-alpha32: rgba(var(--blue6), var(--alpha-5));
  --info-main-alpha48: rgba(var(--blue6), var(--alpha-6));

  --warning-main-alpha8: rgba(var(--mango6), var(--alpha-1));
  --warning-main-alpha12: rgba(var(--mango6), var(--alpha-2));
  --warning-main-alpha16: rgba(var(--mango6), var(--alpha-3));
  --warning-main-alpha24: rgba(var(--mango6), var(--alpha-4));
  --warning-main-alpha32: rgba(var(--mango6), var(--alpha-5));
  --warning-main-alpha48: rgba(var(--mango6), var(--alpha-6));

  --success-main-alpha8: rgba(var(--green6), var(--alpha-1));
  --success-main-alpha12: rgba(var(--green6), var(--alpha-2));
  --success-main-alpha16: rgba(var(--green6), var(--alpha-3));
  --success-main-alpha24: rgba(var(--green6), var(--alpha-4));
  --success-main-alpha32: rgba(var(--green6), var(--alpha-5));
  --success-main-alpha48: rgba(var(--green6), var(--alpha-6));

  --error-main-alpha8: rgba(var(--blue6), var(--alpha-1));
  --error-main-alpha12: rgba(var(--blue6), var(--alpha-2));
  --error-main-alpha16: rgba(var(--blue6), var(--alpha-3));
  --error-main-alpha24: rgba(var(--blue6), var(--alpha-4));
  --error-main-alpha32: rgba(var(--blue6), var(--alpha-5));
  --error-main-alpha48: rgba(var(--blue6), var(--alpha-6));

  --secondary-main-alpha8: rgba(var(--gray6), var(--alpha-1));
  --secondary-main-alpha12: rgba(var(--gray6), var(--alpha-2));
  --secondary-main-alpha16: rgba(var(--gray6), var(--alpha-3));
  --secondary-main-alpha24: rgba(var(--gray6), var(--alpha-4));
  --secondary-main-alpha32: rgba(var(--gray6), var(--alpha-5));
  --secondary-main-alpha48: rgba(var(--gray6), var(--alpha-6));

  --primary-lightest-alpha: rgba(var(--indigo1), var(--alpha-normal));
  --primary-lighter-alpha: rgba(var(--indigo3), var(--alpha-normal));
  --primary-light-alpha: rgba(var(--indigo5), var(--alpha-normal));
  --primary-main-alpha: rgba(var(--indigo6), var(--alpha-normal));
  --primary-dark-alpha: rgba(var(--indigo7), var(--alpha-normal));
  --primary-darker-alpha: rgba(var(--indigo9), var(--alpha-normal));
  --primary-darkest-alpha: rgba(var(--indigo11), var(--alpha-normal));

  --info-lightest-alpha: rgba(var(--blue1), var(--alpha-normal));
  --info-lighter-alpha: rgba(var(--blue3), var(--alpha-normal));
  --info-light-alpha: rgba(var(--blue5), var(--alpha-normal));
  --info-main-alpha: rgba(var(--blue6), var(--alpha-normal));
  --info-dark-alpha: rgba(var(--blue7), var(--alpha-normal));
  --info-darker-alpha: rgba(var(--blue9), var(--alpha-normal));
  --info-darkest-alpha: rgba(var(--blue11), var(--alpha-normal));

  --success-lightest-alpha: rgba(var(--green1), var(--alpha-normal));
  --success-lighter-alpha: rgba(var(--green3), var(--alpha-normal));
  --success-light-alpha: rgba(var(--green5), var(--alpha-normal));
  --success-main-alpha: rgba(var(--green6), var(--alpha-normal));
  --success-dark-alpha: rgba(var(--green7), var(--alpha-normal));
  --success-darker-alpha: rgba(var(--green9), var(--alpha-normal));
  --success-darkest-alpha: rgba(var(--green11), var(--alpha-normal));

  --warning-lightest-alpha: rgba(var(--mango1), var(--alpha-normal));
  --warning-lighter-alpha: rgba(var(--mango3), var(--alpha-normal));
  --warning-light-alpha: rgba(var(--mango5), var(--alpha-normal));
  --warning-main-alpha: rgba(var(--mango6), var(--alpha-normal));
  --warning-dark-alpha: rgba(var(--mango7), var(--alpha-normal));
  --warning-darker-alpha: rgba(var(--mango9), var(--alpha-normal));
  --warning-darkest-alpha: rgba(var(--mango11), var(--alpha-normal));

  --error-lightest-alpha: rgba(var(--red1), var(--alpha-normal));
  --error-lighter-alpha: rgba(var(--red3), var(--alpha-normal));
  --error-light-alpha: rgba(var(--red5), var(--alpha-normal));
  --error-main-alpha: rgba(var(--red6), var(--alpha-normal));
  --error-dark-alpha: rgba(var(--red7), var(--alpha-normal));
  --error-darker-alpha: rgba(var(--red9), var(--alpha-normal));
  --error-darkest-alpha: rgba(var(--red11), var(--alpha-normal));

  --tranparent: #00000000;

  --gray-100: rgb(var(--gray1));
  --gray-200: rgb(var(--gray2));
  --gray-300: rgb(var(--gray3));
  --gray-400: rgb(var(--gray4));
  --gray-500: rgb(var(--gray5));
  --gray-600: rgb(var(--gray6));
  --gray-700: rgb(var(--gray7));
  --gray-800: rgb(var(--gray8));
  --gray-900: rgb(var(--gray9));

  --gray-100-alpha: rgba(var(--gray1), var(--alpha-normal));
  --gray-200-alpha: rgba(var(--gray2), var(--alpha-normal));
  --gray-300-alpha: rgba(var(--gray3), var(--alpha-normal));
  --gray-400-alpha: rgba(var(--gray4), var(--alpha-normal));
  --gray-500-alpha: rgba(var(--gray5), var(--alpha-normal));
  --gray-600-alpha: rgba(var(--gray6), var(--alpha-normal));
  --gray-700-alpha: rgba(var(--gray7), var(--alpha-normal));
  --gray-800-alpha: rgba(var(--gray8), var(--alpha-normal));
  --gray-900-alpha: rgba(var(--gray9), var(--alpha-normal));

  --text-primary: #0A0A2D;
  --text-secondary: #6A6A7F;
  --text-disabled: #B1B2BD;
  --common-black: #000000;
  --common-white: #FFFFFF;
  --common-white-alpha: rgb(255, 255, 255, var(--alpha-normal));
  --common-black-alpha: rgb(0, 0, 0, var(--alpha-normal));

  --16px: 1rem;
  --8px: 0.5rem;
  --24px: 1.5rem;
  --32px: 2rem;
  --40px: 2.5rem;
  --48px: 3rem;
  --56px: 3.5rem;
  --64px: 4rem;
  --72px: 4.5rem;
  --2px: 0.125rem;
  --4px: 0.25rem;
  --12px: 0.75rem;
  --20px: 1.25rem;
  --28px: 1.75rem;
  --36px: 1.625rem;
  --44px: 2.75rem;
  --52px: 3.25rem;
  --60px: 3.75rem;
  --68px: 4.25rem;
  --80px: 5rem;
  --10px: 0.625rem;
  --11px: 0.688rem;
  --15px: 0.938rem;
  --30px: 1.875rem;
  --22px: 1.375rem;
  --18px: 1.125rem;
  --13px: 0.813rem;
  --940px: 58.75rem;
  --6px: 0.375rem;
  --14px: 0.875rem;
  --200px: 12.5rem;
  --1024px: 64rem;
  --1440px: 90rem;
  --1920px: 120rem;
  --2560px: 160rem;
  --280px: 17.5rem;
  --298px: 18.625rem;
  --320px: 20rem;

  --space-100: var(--8px);
  --space-200: var(--16px);
  --space-300: var(--24px);
  --space-400: var(--32px);
  --space-500: var(--40px);
  --space-600: var(--48px);
  --space-700: var(--56px);
  --space-800: var(--64px);
  --space-900: var(--72px);

  --space-25: var(--2px);
  --space-50: var(--4px);
  --space-75: var(--8px);
  --space-150: var(--12px);
  --space-175: var(--16px);
  --space-250: var(--20px);
  --space-275: var(--24px);
  --space-350: var(--28px);
  --space-375: var(--32px);
  --space-450: var(--36px);
  --space-550: var(--44px);
  --space-650: var(--52px);
  --space-750: var(--60px);
  --space-850: var(--68px);

  --secondary-lightest: rgb(var(--gray1));
  --secondary-lighter: rgb(var(--gray3));
  --secondary-light: rgb(var(--gray5));
  --secondary-main: rgb(var(--gray6));
  --secondary-dark: rgb(var(--gray7));
  --secondary-darker: rgb(var(--gray9));
  --secondary-darkest: rgb(var(--gray11));

  --secondary-lightest-alpha: rgba(var(--gray1), var(--alpha-normal));
  --secondary-lighter-alpha: rgba(var(--gray3), var(--alpha-normal));
  --secondary-light-alpha: rgba(var(--gray5), var(--alpha-normal));
  --secondary-main-alpha: rgba(var(--gray6), var(--alpha-normal));
  --secondary-dark-alpha: rgba(var(--gray7), var(--alpha-normal));
  --secondary-darker-alpha: rgba(var(--gray9), var(--alpha-normal));
  --secondary-darkest-alpha: rgba(var(--gray11), var(--alpha-normal));


  --paper-shadow-color: var(--secondary-main-alpha);
  --paper-border-radius: var(--16px);

  --tooltip-z-index: 4000;
  --dialog-z-index: 2000;

  --selectbox-z-index: 1000;
  --selectbox-max-height: var(--200px);
  --selectbox-default-width: var(--80px);
  --selectbox-listitem-inline-padding: 0;
  --selectbox-listitem-block-padding: var(--2px);
  --selectbox-listitem-min-height: var(--24px);
  --selectbox-listitem-default-renderer-inline-padding: var(--10px);
  --selectbox-listitem-default-font-size: var(--16px);

  --button-border-radius: var(--6px);
  --input-border-radius: var(--6px);
  --label-border-radius: var(--6px);
  --dialog-border-radius: var(--15px);
  --dialog-padding: var(--space-275);

  --alert-z-index: 9999;
  --alert-max-width: var(--940px);

  --sidebar-width: 20%;
  --detail-width: 80%;

  --input-label-font-size: var(--12px);
  --input-font-size: var(--16px);

  --input-hint-font-size: var(--12px);
  --input-hint-compact-font-size: var(--11px);

  --input-compact-label-font-size: var(--10px);
  --input-compact-font-size: var(--14px);

  --background-neutral: #E1E2E6;
  --background-light-03-neutral: #F4F6F8;

  --app-layout-min-width: var(--320px);
  --menu-background-color: black;
  --menu-item-color: gray;
  --menu-item-background-color: transparent;

  --menu-item-hover-color: white;
  --menu-item-hover-background-color: transparent;

  --menu-item-selected-color: white;
  --menu-item-selected-background-color: transparent;

  --menu-animation-duration: 0.2s;
}