PassConf UI

A React component library for password verification with visual feedback. The first component in this library provides password confirmation inputs that show you the password in green when you're hitting the correct code to confirm.

Features

• Visual Password Confirmation - Real-time visual feedback showing correct/incorrect characters
• Complete Design System - Includes CSS custom properties, design tokens, and dark mode support
• TypeScript Support - Full TypeScript declarations included
• Modern React - Built with React 18+ and modern hooks
• Tailwind CSS - Styled with Tailwind CSS for easy customization
• Accessible - Built with accessibility in mind using Radix UI primitives

Installation

npm install passconf-ui

Usage

import { PassCheck } from 'passconf-ui';

function App() {
  return (
    <div>
      <PassCheck />
    </div>
  );
}

Note: Styles are automatically included when you import the components - no additional CSS imports needed!

Components

PassCheck

The main password confirmation component that provides visual feedback as users type.

PasswordInput

A specialized input component that shows password characters with color-coded feedback:

• Green - Correct characters matching the original password
• Red - Incorrect characters

Additional Components

• Button - Styled button component
• Input - Styled input component
• Label - Styled label component

Development

This library is built with:

• React 18+ - Modern React with hooks
• TypeScript - Full type safety
• Vite - Fast build tooling
• Tailwind CSS - Utility-first styling
• Radix UI - Accessible component primitives

License

MIT