🧠 Brainyy UI

Brainyy UI is a smart, functional React component library designed to handle common frontend use cases — with built-in logic, helpful UX, and sleek styling using Tailwind CSS.

💡 "Focus on building your app. Let Brainyy handle the UI logic."

🚀 Features

• ⚡ Built-in functionality (no need to re-implement common logic)
• 🎨 Beautifully styled using Tailwind CSS
• 🧩 Composable and extendable components
• 🎛️ CLI to add components to your project
• 🤝 Compatible with ShadCN components
• 🛡️ Smart validations and UX patterns

📦 Installation

npm install brainy

You also need to have @radix-ui components, react, and tailwindcss installed.

🧰 Usage via CLI

Brainyy includes a CLI tool to easily add components to your project.

Step 1: Add CLI globally or use npx

npx brainy add password-analyzer

This will:

• Add the component to src/components folder
• Give you usage instructions

⚠️ Note

For components like password-analyzer, you must have these components from shadcn/ui:

• Input
• Label
• Popover

Make sure to install those first!

🔐 Password Analyzer Component

Analyze password strength and provide user feedback using zxcvbn.

Import

import PasswordAnalyzer from "@/components/PasswordAnalyzer";

Example Usage

<PasswordAnalyzer
  value={password}
  onChange={(val, score, suggestions) => {
    setPassword(val);
    setStrength(score);
    // suggestions array provided too
  }}
  placeholder="••••••••"
  // Optional toggles
  showCrackInfo
  showEntropy
  showPatterns
  showScoreLabel
  showProgress
/>

Props

| Prop | Type | Description | | ---------------- | ------------------------------------------------------------- | --------------------------------------- | | value | string | Password string | | onChange | (val: string, score: number, suggestions: string[]) => void | Callback with live score/suggestions | | placeholder | string? | Placeholder text | | showCrackInfo | boolean | Show estimated crack time & guesses | | showEntropy | boolean | Show entropy info | | showPatterns | boolean | Show detected patterns | | showScoreLabel | boolean | Show strength label (e.g., "Very Weak") | | showProgress | boolean | Show strength progress bar |

✅ Suggestions are always shown as they are core to user feedback.

📁 Folder Structure

brainyy/
├── bin/                   # CLI Entry
├── snippets/              # Component sources
│   └── password-analyzer/
├── src/
│   └── components/        # Target output folder
├── example/               # Usage example (can delete node_modules here)
├── package.json
└── README.md

🔄 Contributing

Want to add your own component?

• Fork the repo
• Add your component under snippets/
• Update CLI script to support it
• Submit a PR

📣 License

MIT © 2025 [Spec.AI]

💬 Questions or Feedback?

Drop issues or ideas in the GitHub repo — we’d love to hear from you!

Happy Building with Brainyy 🧠