open-index/open-npm huggingface dataset:
npm package: @kyc-ui/react
Description: React implementation of KnowYourCustomer Design System, from kycltd
Author: Know Your Customer Ltd
Latest version: 0.2.4

---

**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`.

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

<!-- Please not that @emotion/react >= 11.0.0 and @emotion/styled >= 11.0.0 are peer depedencies. -->

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](https://www.npmjs.com/package/@mui/icons-material) using this command,

```bash
# 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.

```jsx
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:

```jsx
// 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](https://example.com) for more examples.

## License

All packages in this repoare released under the [Apache 2.0 license](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](https://twitter.com/bapak2developer)) – [hanihusam](https://hanihusam.com)