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

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 @aossie/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/@aossie/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 "@aossie/support-us-button";

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

// Import the types in your project:
import type { supportUsButtonProps } from "@aossie/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/@aossie/support-us-button@latest/dist/index.umd.js"></script>

// Import the styles in your project:
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@aossie/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`	Yes	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

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

📍 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 🥂

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
.github		.github
public		public
src		src
.coderabbit.yaml		.coderabbit.yaml
.editorconfig		.editorconfig
.gitignore		.gitignore
.pre-commit-config.yaml		.pre-commit-config.yaml
.templatesyncignore		.templatesyncignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
VERSION		VERSION
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Value	Type	Required	Description
`name`	string	Yes	Sponsor name
`logo`	string	No	Sponsor logo
`link`	string	No	Sponsor website
`sponsorshipTier`	`Tier`	No	Sponsor tier

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

SUPPORT US BUTTON

🚀 Features

💻 Tech Stack

🔗 Repository Links

Installation

Using npm

Using CDN

Usage

Using npm

Using CDN

Example Usage

Props API

Available API

Prop Options Reference

Theme

Pattern

hero

Image

buttonVariant

organizationInformation

projectInformation

sponsors

Tier

ctaSection

sponsorLink

classNames

📱 App Screenshots

AOSSIE-Theme

Light-Theme

Dark-Theme

🙌 Contributing

✨ Maintainers

📍 License

💪 Thanks To All Contributors

About

Resources

License

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 1

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages