KYCrazy UI Kit

A modern React component library for KYC.

🚀 Key features

1. Lightning-Fast Verification ⚡

Instantly check IDs, passports, and driver’s licenses with automated document recognition and AI-powered validation. No waiting days for manual reviews.

2. Selfie + Liveness Detection 🤳

Users snap a quick selfie, and KYCrazy confirms they’re a real, live human — not a photo, mask, or deepfake.

3. Global Compliance Coverage 🌍

Out-of-the-box support for AML, GDPR, and region-specific KYC regulations so your app is always compliant — without extra paperwork.

4. Fraud Detection Superpowers 🕵️‍♂️

Catch fake IDs, duplicate accounts, and suspicious activity before it becomes a problem, using AI anomaly detection and blacklists.

5. Smooth UX, Happy Users 🎉

Mobile-first design, multi-language support, and instant pass/fail results keep the process painless, so users actually finish onboarding.

🔧 Bonus Add-Ons

• Plug & Play APIs for developers
• Customizable Branding so companies can style KYCrazy as their own
• Analytics Dashboard for tracking approvals, rejections, and fraud attempts

📖 Usage

Important: this package ships a precompiled stylesheet. Import the compiled CSS from the package in your consumer app, then import the component JS. This ensures Tailwind utilities and any third‑party CSS used by the components are applied correctly.

import '@techlabi/kycrazy-ui-kit/style.css';
import KYCrazy from '@techlabi/kycrazy-ui-kit';

function App() {
  return (
    <div className="bg-muted/30 flex items-center justify-center p-4 mt-2">
      <KYCrazy
        apiKey="ak_test_0987654321zyxwvutsrqponmlkjihgfedcba"
        apiEndpoint="http://localhost:8080"
        isKYB={true}
        userEmail={user.email}
        userId={user.id}
        fullName={user.fullName} // optional
        hideCompanyActivity={true} // optional
        hideQuestionary={true} // optional
        companyDocumentsTypes={[
          'bank_statement',
          'company_structure',
          'certificate_of_registration',
          'business_license',
          'void_cheque',
        ]} // optional
        onComplete={(token: string, data: KYCRequestData | KYBRequestData) => {}}
        onDoneClick={() => {}}
      />
    </div>
  );
}

🎨 Props

| Prop | Type | Default | Optional | Description | | ----------------------- | --------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | apiEndpoint | string | - | no | provide backend API endpoint where the data will be posted upon KYC verification flow | | apiKey | string | - | no | provide API key to access backend | | isKYB | boolean | false | yes | use in KYB mode | | userEmail | string | - | yes | Email of the user undergoing KYC/KYB verification | | userId | string | - | no | Unique identifier of the user to save the progress | | fullName | string | - | yes | optional full name of the user (will be autocompleted in the KYC flow) | | hideCompanyActivity | boolean | false | yes | hide the company activity (KYB mode) section | | hideQuestionary | boolean | false | yes | hide the questionnaire section (KYB mode) | | companyDocumentsTypes | Array<string> | - | yes | Optional list of company document uppload fields for KYB: bank_statement, company_structure, certificate_of_registration, business_license, void_cheque If prop is not used then all of the fields will be shown | | onComplete | function | - | no | A callback function once the request successfully reached the backend | | onDoneClick | function | - | yes | A callback function once a user clicked on button on final screen |