Radio Buttons

A collection of sleek, interactive, and fully customizable components —

Love React

An interactive heart-shaped reaction button with customizable colors and smooth animations — perfect for likes, favorites, or quick feedback.

Usage (Love React)

Select Service

Dynamic, mini selectable toggle buttons with icons — ideal for choosing services, categories, or options in a fun and interactive way.

Usage (Select Service)

Props

Payment Method

A clean and minimal payment method selector that makes checkout experiences smooth, controlled, and professional.

Rate with Star

A fully interactive 1–5 star rating component with hover effects and real-time feedback — perfect for reviews, products, or services.

Usage (Rate with Star)

Plan Toggle

A stylish toggle to switch between pricing plans (Free, Personal, Team, etc.) with a clear active state and smooth transitions.

Usage (Plan Toggle)

Volume Toggle

A draggable, modern volume control slider designed with fluid animations — sleek, intuitive, and perfect for media players

Pattern Lock

A mobile-style pattern lock screen for web apps — adds a unique and secure interactive experience with customizable nodes and lock values.

Usage (Pattern Lock)

🔒 PatternLock – Real World Usage

1. Register Pattern
   Use mode="set" → capture pattern with onSetPattern → save (hashed) in your DataBase.

2. Unlock
   Use mode="unlock" → pass saved pattern as initialPattern → check via onUnlock.

3. Security

   • Hash pattern before storing (like a password).

   • Add retry limits to prevent brute force.

4. UI/UX

   • Works with mouse & touch.

   • Add “reset pattern” flow if forgotten.

5. Enhance

   • Confirm twice when setting.

   • Optionally increase grid size (e.g., 4×4) for stronger locks.