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.
-
🎨 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.
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
You can install and use this package either through npm (recommended for Node.js projects) or directly via a CDN.
Install the package using npm:
# Install the package
npm install support-us-buttonYou 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.
// 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<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.
Props template — fill in your own values:
const props: supportUsButtonProps = {
// Theme for the button, can be one of "light", "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} />;Show details
| Prop | Type | Required | Description |
|---|---|---|---|
Theme |
string | No | "light" or "dark" |
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 |
Show details
All available options for configurable props in the component.Show details
Controls the overall visual appearance of the widget.
| Value | Description |
|---|---|
dark |
Dark mode UI |
light |
Light mode UI |
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 |
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 |
Show details
List of sponsors displayed in the widget.
| Value | Type | Required | Description |
|---|---|---|---|
name |
string | Yes | Sponsor name |
sponsorshipTier |
Tier |
No | Sponsor 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 |
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. |
Show details
Light-Theme mobile screen preview.
Show details
Dark-Theme mobile screen preview.
⭐ 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.
This project is licensed under the GNU General Public License v3.0. See the LICENSE file for details.
Thanks a lot for spending your time helping SupportUsButton grow. Keep rocking 🥂
© 2026 AOSSIE