kesp-ui 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +156 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,47 +1,179 @@
|
|
|
1
|
-
# kesp-ui
|
|
1
|
+
# 🇮🇳 kesp-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Reusable KYC UI components for Indian fintech apps.**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Stop rebuilding Aadhaar, PAN, and OTP flows in every project.
|
|
6
|
+
Built for Indian developers who are tired of recreating the same KYC components again and again.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## ✨ Why kesp-ui?
|
|
11
|
+
|
|
12
|
+
Every Indian fintech or SaaS product needs:
|
|
13
|
+
|
|
14
|
+
- Aadhaar Input
|
|
15
|
+
- PAN Validation
|
|
16
|
+
- OTP Flow
|
|
17
|
+
- Masked Document Upload
|
|
18
|
+
|
|
19
|
+
So instead of rebuilding them in every project — **kesp-ui provides production-ready, drop-in components via CLI.**
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 🚀 Installation (No Setup Needed)
|
|
24
|
+
|
|
25
|
+
Just run:
|
|
6
26
|
|
|
7
27
|
```bash
|
|
8
28
|
npx kesp-ui add aadhaar-input
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
That's it. The component gets added directly to your project.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 📦 Available Components
|
|
36
|
+
|
|
37
|
+
### 1️⃣ Aadhaar Input
|
|
38
|
+
|
|
39
|
+
- 12-digit validation
|
|
40
|
+
- Verhoeff checksum validation
|
|
41
|
+
- Auto spacing
|
|
42
|
+
- Error states
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npx kesp-ui add aadhaar-input
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
### 2️⃣ PAN Card Input
|
|
51
|
+
|
|
52
|
+
- Live format validation (`ABCDE1234F`)
|
|
53
|
+
- Uppercase enforcement
|
|
54
|
+
- Instant error feedback
|
|
55
|
+
|
|
56
|
+
```bash
|
|
9
57
|
npx kesp-ui add pan-input
|
|
10
58
|
```
|
|
11
59
|
|
|
12
|
-
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### 3️⃣ OTP Input
|
|
63
|
+
|
|
64
|
+
- 6-digit OTP
|
|
65
|
+
- Auto focus between fields
|
|
66
|
+
- Countdown timer
|
|
67
|
+
- Resend button
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npx kesp-ui add otp-input
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
### 4️⃣ Masked Aadhaar Upload
|
|
76
|
+
|
|
77
|
+
- Masked preview
|
|
78
|
+
- Blur toggle
|
|
79
|
+
- File validation
|
|
13
80
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
| `pan-input` | Validated PAN Card input with segment progress bars |
|
|
81
|
+
```bash
|
|
82
|
+
npx kesp-ui add masked-aadhar
|
|
83
|
+
```
|
|
18
84
|
|
|
19
|
-
|
|
85
|
+
---
|
|
20
86
|
|
|
87
|
+
## 🛠 All CLI Commands
|
|
88
|
+
|
|
89
|
+
**List all components**
|
|
21
90
|
```bash
|
|
22
91
|
npx kesp-ui list
|
|
23
92
|
```
|
|
24
93
|
|
|
25
|
-
|
|
94
|
+
**Add a specific component**
|
|
95
|
+
```bash
|
|
96
|
+
npx kesp-ui add aadhaar-input
|
|
97
|
+
npx kesp-ui add pan-input
|
|
98
|
+
npx kesp-ui add otp-input
|
|
99
|
+
npx kesp-ui add masked-aadhar
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
**Add to custom path** *(Default path: `components/ui`)*
|
|
103
|
+
```bash
|
|
104
|
+
npx kesp-ui add aadhaar-input --path src/components/ui
|
|
105
|
+
# or shorthand
|
|
106
|
+
npx kesp-ui add aadhaar-input -p src/components/ui
|
|
107
|
+
```
|
|
26
108
|
|
|
27
|
-
|
|
109
|
+
**Check version**
|
|
110
|
+
```bash
|
|
111
|
+
npx kesp-ui --version
|
|
112
|
+
```
|
|
28
113
|
|
|
114
|
+
**Help**
|
|
29
115
|
```bash
|
|
30
|
-
npx kesp-ui
|
|
116
|
+
npx kesp-ui --help
|
|
117
|
+
npx kesp-ui add --help
|
|
31
118
|
```
|
|
32
119
|
|
|
33
|
-
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## 📥 Import After Installation
|
|
34
123
|
|
|
35
124
|
```tsx
|
|
36
|
-
import AadhaarInput from "@/components/ui/aadhaar-input"
|
|
37
|
-
import
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return (
|
|
41
|
-
<div>
|
|
42
|
-
<AadhaarInput label="Enter Aadhaar" onChange={(val) => console.log(val)} />
|
|
43
|
-
<PanCardInput label="Enter PAN" onValid={(val) => console.log(val)} />
|
|
44
|
-
</div>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
125
|
+
import AadhaarInput from "@/components/ui/aadhaar-input"
|
|
126
|
+
import PanInput from "@/components/ui/pan-input"
|
|
127
|
+
import OtpInput from "@/components/ui/otp-input"
|
|
128
|
+
import MaskedAadhar from "@/components/ui/maskedAadhar"
|
|
47
129
|
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## 🧱 Built With
|
|
134
|
+
|
|
135
|
+
- [shadcn/ui](https://ui.shadcn.com/)
|
|
136
|
+
- [Tailwind CSS](https://tailwindcss.com/)
|
|
137
|
+
- [React](https://react.dev/)
|
|
138
|
+
- [Next.js](https://nextjs.org/)
|
|
139
|
+
|
|
140
|
+
Works seamlessly with any **Next.js + Tailwind** setup.
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## 💡 Who Is This For?
|
|
145
|
+
|
|
146
|
+
- Fintech startups
|
|
147
|
+
- SaaS builders
|
|
148
|
+
- Indie developers
|
|
149
|
+
- Hackathon participants
|
|
150
|
+
- Indian product teams
|
|
151
|
+
|
|
152
|
+
If you're building for Indian users, this saves hours every time.
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
## 🔮 Roadmap (Community Driven)
|
|
157
|
+
|
|
158
|
+
Upcoming components being considered:
|
|
159
|
+
|
|
160
|
+
- [ ] IFSC Validator
|
|
161
|
+
- [ ] GST Input
|
|
162
|
+
- [ ] Bank Account Validator
|
|
163
|
+
- [ ] UPI ID Input
|
|
164
|
+
- [ ] Indian Phone Number Input (+91 format)
|
|
165
|
+
|
|
166
|
+
Got suggestions? [Open an issue](../../issues) or comment 👇
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## 🤝 Contributing
|
|
171
|
+
|
|
172
|
+
Contributions are welcome!
|
|
173
|
+
|
|
174
|
+
1. Fork the repo
|
|
175
|
+
2. Create a new branch
|
|
176
|
+
3. Add your component
|
|
177
|
+
4. Submit a PR
|
|
178
|
+
|
|
179
|
+
Let's build the Indian component registry together 🇮🇳
|