✕

 

             

---

SUPPORT US BUTTON

A lightweight React component library for displaying Support us page in a clean and customizable way. It provides pre-built UI components to showcase support us page with tier-based layouts, theme support, and Tailwind CSS styling, making it easy to integrate a professional support us page into any project or website.

---

🚀 Features

• 🎨 Tier-based Layouts: Display sponsors in different tiers with logos and links, styled according to the selected theme.

• 🎨 Theme Support: Choose from auto, inherit, light, or dark themes for consistent branding.

• 🎨 Customizable Styling: Tailwind CSS classes for easy customization of the support us page.

• 🖥️ Responsive Design: Built with responsive design principles for optimal viewing on all devices.

• 🧩 Easy Integration: Simple to integrate into any project or website with a single component.

• 📦 ESM + CommonJS + UMD builds: Supports various module systems for flexible integration.

• 🧠 TypeScript support included: Provides type definitions for seamless development.

• 🎨 Styled with Tailwind (no global resets): Uses Tailwind CSS for styling with no global resets.

• 🪶 Lightweight and optimized: Lightweight and optimized for performance.

---

💻 Tech Stack

React – For building reusable UI components

TypeScript – For type safety and better developer experience

Tailwind CSS – For modern, utility-first styling

Rollup – For bundling and optimizing the package for distribution

Node.js & npm – For package management and publishing

---

🔗 Repository Links

• Main Repository
• NPM Package
• CDN

---

Installation

You can install and use this package either through npm (recommended for Node.js projects) or directly via a CDN.

Using npm

Install the package using npm:

# Install the package
npm install support-us-button

Using CDN

You can also use the component directly in the browser via a CDN:

<script src="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/index.umd.js"></script>

Once included, the component will be available to use in your project.

---

Usage

Using npm

// Import the component in your project:
import SupportUsButton from "support-us-button";

// Import the styles in your project:
import "support-us-button/style.css";

// Import the types in your project:
import type { supportUsButtonProps } from "support-us-button";

// Use the component in your project:
<SupportUsButton {...props} />; // props is an object of type supportUsButtonProps

Note

Tailwind CSS Setup Requirements

• Tailwind CSS v4 or later: Import the stylesheet directly:

  import "support-us-button/style.css";

• Tailwind CSS v3 or earlier: Do not import the stylesheet directly. Instead, add the package directory to the content array in your tailwind.config.js so Tailwind can detect and compile the required classes.

  module.exports = {
    content: [
      "./src/**/*.{js,ts,jsx,tsx}", // Your project files
      "./node_modules/support-us-button/dist/**/*.{js,ts,jsx,tsx}", // Support Us Button package
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };

Using CDN

<script src="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/index.umd.js"></script>

// Import the styles in your project:
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/support-us-button@latest/dist/style.css"
/>

// Use the component in your project:
<SupportUsButton />

Once included, the component will be available to use in your project.

---

Quick Start

Props template — fill in your own values:

const props: supportUsButtonProps = {
  // Theme for the button, can be one of "auto", "inherit", "light", or "dark".
  Theme: Theme,

  // Information about the organization, including name, description, logo, and project information
  organizationInformation: organizationInformation,

  // Information about the project, including name, description, and image
  projectInformation: projectInformation,

  // List of current sponsors, each with name, optional logo, link, and sponsorship tier
  sponsors: sponsors,

  // Information about the call-to-action section, including title, description, and sponsor links
  ctaSection: CTASection
};

<SupportUsButton {...props} />;

---

Props API

Show details

Available API

Prop	Type	Required	Description
Theme	string	No	"auto", "inherit", "light", or "dark"
heading	string | function	No	Custom title, or (projectName) => ReactNode to localize it. Default: "Support {project name}"
labels	object	No	Localize fixed captions: { madeBy?: string, supportedBy?: string }. Defaults: "A project made by", "Supported By"
monochromeLogos	boolean	No	Render project and organization logos in one theme-matched color (default true). Set false to keep the logos' original colors
organizationInformation	object	Yes	Information about the organization, including name, description, logo, and project information
sponsors	array of objects	No	List of current sponsors, each with name, optional logo, link, and sponsorship tier
ctaSection	array of object	Yes	Information about the call-to-action section, including title, description, and sponsor links
projectInformation	object	No	Information about project, which user will see on sponsor page
Logo	Boolean	No	AOSSIE, bg-logo.
className	string	No	Class to apply on the root element.
border	object	No	These defines the length in X and Y axis of border around page. Only pass it when border is not covering full page (e.g. TopX1: "-10" TopX2: "110").

---

Prop Options Reference

Show details

All available options for configurable props in the component.

Theme

Show details

Controls the overall visual appearance of the widget.

Value	Description
auto	Automatically adapt to host environment
inherit	Inherit parent styles
light	Light mode UI
dark	Dark mode UI

organizationInformation

Show details

Information about the organization and project.

Value	Type	Required	Description
name	string	Yes	Organization name
desc	string	Yes	Organization description
image	string	No	Organization logo
link	string	No	Organization link

projectInformation

Show details

Details about the project being sponsored.

Value	Type	Required	Description
name	string	Yes	Project name
description	string	Yes	Project description
image	string	Yes	Project description

sponsors

Show details

List of sponsors displayed in the widget.

Value	Type	Required	Description
name	string	Yes	Sponsor name
sponsorshipTier	Tier	No	Sponsor tier

Tier

Show details

Used inside the sponsors array to visually differentiate sponsors.

Value	Description
Platinum	Highest tier sponsor
Gold	High level sponsor
Silver	Mid level sponsor
Bronze	Entry level sponsor

ctaSection

Show details

Call-to-action section encouraging sponsorship.

Value	Type	Required	Description
name	string	Yes	CTA title
url	string	Yes	CTA url to redirect the user to that page.

border

Show details

Call-to-action section encouraging sponsorship.

Value	Type	Required	Description
TopX1	string	Yes	Border top line
TopX2	string	Yes	Border top line
BottomX1	string	Yes	Border bottom line
BottomX1	string	Yes	Border bottom line
LeftY1	string	Yes	Border left line
LeftY2	string	Yes	Border left line
RightY1	string	Yes	Border right line
RightY2	string	Yes	Border right line

---

📱 App Screenshots

Light-Theme

Show details

Light-Theme mobile screen preview.

Dark-Theme

Show details

Dark-Theme mobile screen preview.

---

🛠️ Local Development

git clone https://github.com/AOSSIE-Org/SupportUsButton.git
cd SupportUsButton
npm install
npm run vite:dev     # interactive dev preview at http://localhost:3000
npm test             # type-check + Vitest unit tests
npm run build        # bundles dist/ (ESM, CJS, UMD + style.css)
npm run vite:build   # builds the dev preview deployed to GitHub Pages

---

🙌 Contributing

⭐ Don't forget to star this repository if you find it useful! ⭐

Thank you for considering contributing to this project! Contributions are highly appreciated and welcomed. To ensure smooth collaboration, please refer to our Contribution Guidelines.

---

✨ Maintainers

• Bruno Woltzenlogel Paleo
• Rahul Vyas
• Saksham Jain
• Madhav

See MAINTAINERS.md for contact details.

---

📍 License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

---

💪 Thanks To All Contributors

Thanks a lot for spending your time helping SupportUsButton grow. Keep rocking 🥂

© 2026 AOSSIE