KESP-UI

Inspiration

While building web applications, I noticed that many Indian platforms require users to enter verification details such as Aadhaar numbers, PAN card numbers, phone numbers, and OTP codes. Developers often end up implementing the same validation and formatting logic repeatedly in different projects. This inspired me to build Kesp UI, a reusable component library that simplifies these commonly used verification inputs and saves development time.

What it does

Kesp UI is a React-based component library that provides pre-built inputs for verification and validation workflows used in Indian applications. It includes components such as Aadhaar input, masked Aadhaar input, PAN card input, OTP input, and phone number input with built-in formatting and validation. The library allows developers to easily integrate these components into their applications while maintaining a consistent and user-friendly input experience.

How we built it

The project was built using React, Next.js, and TypeScript to ensure modular and reliable components. Tailwind CSS and shadcn/ui were used to design clean and customizable UI elements. The component library was packaged and distributed through npm, allowing developers to install and use the components easily. A documentation website was also created to explain installation steps and component usage.

Challenges we ran into

One challenge was designing components that are flexible enough to work across different React projects while supporting both controlled and uncontrolled input patterns. Another challenge was implementing accurate validation and input formatting without affecting the smoothness of user interaction.

Accomplishments that we're proud of

We are proud of building a reusable npm package that solves a real problem developers face when building forms for Indian applications. Creating well-structured components along with documentation and making them easy to integrate into projects was a key achievement.

What we learned

Through this project, we learned more about component architecture, TypeScript integration, package distribution through npm, and building developer-friendly documentation. It also improved our understanding of designing UI components that are reusable and scalable.

What's next for Kesp UI

In the future, we plan to expand the library by adding more verification and form-related components, improving customization options, and supporting additional validation patterns commonly used in modern applications.

Built With

• nextjs
• npm
• react
• tailwind
• typescript