♻️ Reusable Components Setup


🧱 Component Design Philosophy


📝 Component Naming Convention


⚙️ Tailwind Customization

Update tailwind.config.js to include:

theme.extend.colors // Add custom colors like `bb-purple`, `bb-gray-700`, etc.
theme.extend.boxShadow // Add custom shadow styles

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        "bb-purple": "#5469D4",
        ...
      },
      boxShadow: {
        "custom-box-shadow": "10px 10px 5px 200px rgba(0,0,0,1)",
      },
    },
  },
  ...
};


📦 Packages to Install

Install UI helper libraries:

yarn add [email protected]                 # Utility library for FP
yarn add [email protected]             # Conditionally join class names
yarn add remixicon                    # Icon library
yarn add @floating-ui/react@^0.26.6   # Tooltip and floating element positioning