brainyy

🧠 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 🧠