support-us-button

 

              

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 light, dark, minimal, corporate, or AOSSIE 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

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.

Example Usage

Below is an example configuration for the SupportUsButton component.
Replace the placeholder text (titles, descriptions, images, links, etc.) with your own project information.

// Example props configuration for SupportUsButton
// Modify the values according to your project needs

const props: supportUsButtonProps = {
    // Theme of the widget (e.g., AOSSIE, light, dark, minimal)
    Theme: "AOSSIE",

    // Background pattern type (e.g., grid, dots)
    pattern: "grid",

    hero: {
        Image: {
            // Replace with your hero image
            src: "https://your-image-link.com/hero-image.png",
            alt: "Hero section image",
        },

        // Main title shown at the top of the widget
        title: "Your Title Here",

        // Short description about your project or mission
        description:
            "Write a brief description about your project, organization, or the purpose of sponsorship here.",

        // Label shown above the sponsors section
        sponsorLabel: "Your Sponsors",
    },

    organizationInformation: {
        // Name of your organization
        name: "Your Organization Name",

        // Short description about the organization
        description:
            "Describe your organization, its mission, and what it works on.",

        // Optional organization logo
        logo: {
            src: "https://your-image-link.com/logo.png",
            alt: "Organization Logo",
        },

        projectInformation: {
            // Name of the project that is being sponsored
            name: "Your Project Name",

            // Short description of the project
            description:
                "Provide a short description of the project that sponsors are supporting.",
        },
    },

    // List of sponsors
    sponsors: [
        {
            name: "Sponsor Name",
            logo: "https://your-image-link.com/sponsor-logo.png",
            link: "https://sponsor-website.com",

            // Optional tier: Bronze | Silver | Gold | Platinum
            sponsorshipTier: "Bronze",
        },
        {
            name: "Another Sponsor",
            logo: "https://your-image-link.com/sponsor-logo.png",
            link: "https://sponsor-website.com",
            sponsorshipTier: "Silver",
        },
        {
            name: "Company Name",
            logo: "https://your-image-link.com/company-logo.png",
            link: "https://company-website.com",
            sponsorshipTier: "Gold",
        },
    ],

    ctaSection: {
        // Call-to-action title
        title: "Support This Project",

        // Description encouraging users to sponsor the project
        description:
            "Explain why supporting your project matters and how people can help.",

        sponsorLink: [
            {
                // Platform name
                name: "Patreon",

                // Sponsorship link
                url: "https://www.patreon.com/yourproject",

                // Optional icon for the platform
                icon: (
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                    >
                        <path d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                    </svg>
                ),

                // Optional custom class for styling
                className: "patreon-link",

                // Open link in a new tab
                newTab: true,
            },
            {
                name: "GitHub Sponsors",
                url: "https://github.com/sponsors/yourproject",
                icon: (
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                    >
                        <path d="M0 0h24v24H0z" fill="none" />
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                    </svg>
                ),
                className: "github-sponsors-link",
                newTab: true,
            },
        ],
    },

    // Button styling variant
    buttonVariant: "AOSSIE",
};

// Component usage
<SupportUsButton {...props} />;

Props API

Show details

Available API

Prop	Type	Required	Description
Theme	string	No	Theme for the button, can be one of "AOSSIE", "light", "dark", "minimal", or "corporate"
pattern	string	No	Optional background pattern for the button, can be one of "dots", "grid", "AOSSIE", or "none"
hero	object	Yes	Information about the Hero section, including title, description, sponsor label, and optional background Image
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	object	Yes	Information about the call-to-action section, including title, description, and sponsor links
classNames	object	No	Optional additional CSS class for custom styling
buttonVariant	string	No	Optional button variant for styling the call-to-action buttons

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
AOSSIE	Default theme styled for AOSSIE branding
corporate	Corporate styled layout
dark	Dark mode UI
light	Light mode UI
minimal	Minimal clean design

Pattern

Show details

Adds a decorative background pattern to the hero section.

Value	Description
AOSSIE	Square and Circle pattern
dots	Dot pattern background
grid	Subtle grid pattern
none	None

hero

Show details

Controls the top section of the widget.

Value	Type	Required	Description
Image	Image	No	Background or hero image
title	string	Yes	Main heading
description	string	Yes	Hero description
sponsorLabel	string	No	Label above sponsor section

Image

Show details

Used in hero images and organization logos.

Value	Type	Required	Description
src	string	No	Imag URl
alt	string	No	Alternative text

buttonVariant

Show details

Controls the styling of the call-to-action buttons.

Value	Description
AOSSIE	Default styled button
primary	Primary action button
secondary	Secondary button style
ghost	Transparent minimal button
gradient	Gradient styled button

organizationInformation

Show details

Information about the organization and project.

Value	Type	Required	Description
name	string	Yes	Organization name
description	string	Yes	Organization description
logo	Image / string	No	Organization logo
projectInformation	projectInformation	No	Project details

projectInformation

Show details

Details about the project being sponsored.

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

sponsors

Show details

List of sponsors displayed in the widget.

Value	Type	Required	Description
name	string	Yes	Sponsor name
logo	string	No	Sponsor logo
link	string	No	Sponsor website
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
title	string	Yes	CTA title
description	string	Yes	CTA description
sponsorLink	sponsorLink[]	Yes	List of sponsorship platforms

sponsorLink

Show details

Platform links for sponsorship (Patreon, GitHub Sponsors, etc).

Value	Type	Required	Description
name	string	Yes	Platform name
url	string	Yes	Sponsorship URL
icon	ReactNode	No	Icon for the platform
className	string	No	Custom CSS class
newTab	boolean	No	Open link in new tab

classNames

Show details

Allows custom styling of different widget sections.

Value	Description
container	Root container styling
Hero	Hero section styling
organizationInformation	Organization section styling
sponsors	Sponsors section styling
ctaSection	CTA section styling

📱 App Screenshots

AOSSIE-Theme

Show details

AOSSIE-Theme mobile screen preview.

Light-Theme

Show details

Light-Theme mobile screen preview.

Dark-Theme

Show details

Dark-Theme mobile screen preview.

🙌 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

• Rahul vyas
• Zahnentferner

📍 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