Introduction & Why kesp-ui

Every Indian fintech or SaaS product needs the same set of KYC components: Aadhaar input with checksum validation, PAN card formatting, OTP flows with countdown timers, masked document uploads, and Indian phone number fields. These components are non-trivial to build correctly — they require format rules, regex validation, accessibility, and polished UX.

kesp-ui is a CLI-first component registry that drops production-ready, copy-paste-friendly React components directly into your project. No npm install bloat. No wrapper libraries. Just clean, customizable components you own.

Zero Configuration

Components copy directly into your codebase

Production Ready

Verhoeff checksum, PAN regex validation

Fully Customizable

You own the source code

Indian Compliance

Built for Indian regulatory requirements

Installation

💡 No npm install needed — just run the CLI and components are copied straight into your project.

# Add a specific component
npx kesp-ui add aadhaar-input

Prerequisites

  • Node.js 16+
  • React 18+
  • Next.js (recommended)
  • Tailwind CSS
  • shadcn/ui (optional)

Quick Start

Get up and running in under 60 seconds:

1
Add the components you need
npx kesp-ui add aadhaar-input
npx kesp-ui add pan-input
npx kesp-ui add otp-input
2
Import in your React/Next.js page
import AadhaarInput from "@/components/ui/aadhaar-input"
import PanInput from "@/components/ui/pan-input"
import OtpInput from "@/components/ui/otp-input"
3
Use in your JSX
export default function KycPage() {
  return (
    <div>
      <AadhaarInput />
      <PanInput />
      <OtpInput />
    </div>
  )
}

Components

kesp-ui ships 5 production-ready KYC components. Each can be added independently.

Aadhaar Input

aadhaar-input
12-digit format
Verhoeff checksum
Auto spacing
Privacy masking
npx kesp-ui add aadhaar-input

PAN Card Input

pan-input
Format validation
Auto uppercase
Instant feedback
ABCDE1234F pattern
npx kesp-ui add pan-input

OTP Input

otp-input
6-digit input
Auto focus
Countdown timer
Paste support
npx kesp-ui add otp-input

Phone Input

phone-input
+91 prefix
10-digit validation
Numeric only
Clean formatting
npx kesp-ui add phone-input

Masked Aadhaar Upload

masked-aadhar
Drag & drop
Blurred preview
Toggle visibility
UIDAI compliant
npx kesp-ui add masked-aadhar

CLI Reference

All kesp-ui operations are performed via the CLI using npx. No global install required.

npx kesp-ui list

List all available components

npx kesp-ui add aadhaar-input

Add Aadhaar Input component

npx kesp-ui add --path <dir>

Add component to custom directory

npx kesp-ui --version

Print CLI version

npx kesp-ui --help

Show general help

Ready to build faster?

Stop rebuilding KYC flows. Start shipping products. Join hundreds of Indian developers using kesp-ui.

🇮🇳 Built for Indian developers, by Indian developers • MIT License