♻️ Reusable Components Setup

🧱 Component Design Philosophy

• Reusable components are general-purpose UI building blocks.
• Build once, use many times: customize using props.
• Example components: Button, Input, NavBar, Tooltip, PageTitle, PageLoader, Table, Container.

📝 Component Naming Convention

• Use PascalCase for:
  • File names
  • Component names
• Export components as default exports.

⚙️ 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