# password-portraits
> AI-powered visual password strength analyzer. Generates unique warrior portraits driven by entropy. **Zero-knowledge β the password never leaves the browser.**
[](https://www.npmjs.com/package/password-portraits)
[](./LICENSE)
[](https://cdn.jsdelivr.net/npm/password-portraits/)
---
## Install
```bash
npm install password-portraits
# peer deps (required in your project)
npm install react react-dom
# optional β only if you use 3D portrait components
npm install three
```
---
## CDN (no build tool needed)
```html
```
---
## Quick Start β React (ESM)
```tsx
import { PasswordField, SecurityDashboard, ThreatSimulator, Portrait } from 'password-portraits';
import 'password-portraits/style.css';
export default function SignupPage() {
return (
);
}
```
---
## π Production-Ready Setup
To get the premium "Password Portraits" look and ensure everything works smoothly, follow these 3 steps:
### 1. Import Google Fonts
Our UI uses specific premium fonts. Add this to your `index.html` `` or your main CSS file:
```html
```
### 2. Import Global Styles
Import our compiled stylesheet in your app's entry point (e.g., `App.tsx` or `main.tsx`):
```tsx
import 'password-portraits/style.css';
```
> [!NOTE]
> Our components are designed for a **Dark Theme**. We recommend setting your app background to `#020617`.
### 3. Run the Analysis Engine
For the widgets (Score, XP, Checklist) to update in real-time as you type, you **must** run the `usePasswordAnalysis` hook in your component:
```tsx
import {
PasswordField,
StrengthBadges,
usePasswordAnalysis
} from 'password-portraits';
export default function MyForm() {
// This hook runs the AI analysis in the background
usePasswordAnalysis();
return (