Foodbuy Component Library

This library contains shared React components for Foodbuy Technology Solutions.

🛠️ For Consumers (Using the Library)

If you want to use these components in another React project, follow these steps.

Prerequisites

1. React: This library requires a React environment (version 18 or higher).

Installation

npm install @foodbuy-technology-solutions/component-library

Usage

import { AccordionList } from "@foodbuy-technology-solutions/component-library";

// Use AccordionList as usual

Styling & Themes

There are two ways to handle styling, depending on whether your project uses Tailwind CSS and whether you want to use your own theme or the default theme.

Option 1: Standalone CSS (Preserves Default Theme)

Recommended for: Non-Tailwind projects OR projects that want the components to look exactly like they do in the main repo.

By importing the bundled CSS, the components will use the original Foodbuy colors, spacing, and font variables. Add this import to your main entry point (e.g., main.tsx or App.tsx):

import "@foodbuy-technology-solutions/component-library/styles";

Option 2: Tailwind Integration (Adopts Your Local Theme)

Recommended for: Projects that already use Tailwind CSS and want the library components to "blend in" by using your local theme colors (e.g., your primary color).

Note: For this to work correctly, your Tailwind configuration should define the color slots and variables used by the library (e.g., primary, secondary, muted, accent, etc.).

1. Do NOT import the @foodbuy-technology-solutions/component-library/styles file.
2. Update your Tailwind configuration to scan the library for classes:

For Tailwind CSS v4: Add the library path to your CSS entry point:

@source "../node_modules/@foodbuy-technology-solutions/component-library/dist";

For Tailwind CSS v3: Update your tailwind.config.js:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@foodbuy-technology-solutions/component-library/dist/**/*.{js,mjs}"
  ],
  // ... rest of your config
}