KYCUI is Kyc's design system. It contains foundations, voice and tone guidelines, component standards, and other guidelines that systematically improve quality, timeliness, and consistency to our product.

KYC UI is an implementation of KYCUI using the React framework. It is the true implementation of KYCUI in raw code form, designed to communicate with users and bring delightful experiences. KYC UI is the designation for KYCUI React components.

Usage

Prerequisites

KYC UI based on material-ui. So, you don't need to install @mui/material.

# yarn
$ yarn add @kyc-ui/react
# npm
$ npm install --save @kyc-ui/react

But if you need to use @mui/lab, you have to install @mui/material first. The lab has a peer dependency on the core components.

SVG Icons

We use prebuilt SVG Material icons. You can install @mui/icons-material using this command,

# yarn
$ yarn add @mui/icons-material
# npm
$ npm install --save @mui/icons-material

If you would like to use additional styles for KycProvider, add the disableInjection prop to KycProvider and add your custom styles as follows.

import { css } from '@emotion/css';
import { KycProvider, injectGlobalStyles } from '@kyc-ui/react';
const styles = css`
  [data-reach-tooltip] {
    z-index: 1;
    pointer-events: none;
    position: absolute;
    padding: 0.25em 0.5em;
    box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
    white-space: nowrap;
    font-size: 85%;
    background: #f0f0f0;
    color: #444;
    border: solid 1px #ccc;
  }
`;
const { inputGlobalStyles } = injectGlobalStyles(styles);
export default function MyApp({ children }) {
  return (
    <KycProvider disableInjection>
      {inputGlobalStyles}
      {children}
    </KycProvider>
  );
}

Once you've applied the provider, you can use KYC UI components in your app. See the example below.

Example

Kyc UI is built in React, with styling done in emotion. To use these components, import them as follows:

// Example for `<Button />` component.
import * as React from 'react';
import { Button } from '@kyc-ui/react';
export default function Component() {
  return <Button>Push Me</Button>;
}

Read the Storybook for more examples.

License

All packages in this repoare released under the Apache 2.0 license. Please note that some packages (like our fonts package) may contain third-party materials with different licences. Any third-party acknowledgements are outlined on the "Credits" section on each package's README.

Copyright (c) 2021 Know Your Custome Limited. All rights reserved.

Maintainers

• Hani Husamuddin (@hanihusam) – hanihusam