Launched February 11, 2025.png?width=160)
Ko-Fi React Library
☕ Get tips and donations in your React projects
FreeCodeOpen Source2,969 impressions#14 of its week
Ko-Fi React Library is an open-source collection of customisable React.js components that let you collect donations and tips on your website. Widgets include a tip button, dialog/modal, a floating widget, and donation panel.
React library providing customizable Ko-Fi donation widgets for React apps
- for
- React developers who want to add tips and donations
- pricing
- open source
- license
- open source
works withReactTailwindCSS
Key features
5 features of Ko-Fi React Library
- KoFiDialog — Button that opens a modal with the Ko-Fi donation panel
- KoFiButton — Simple button that opens the Ko-Fi page in a new tab
- KoFiWidget — Floating Ko-Fi widget attached to the page bottom left
- KoFiPanel — Full Ko-Fi donation panel as a React component
- Tailwind support — Works with TailwindCSS and provides optional Tailwind config
Use cases
- Add a tip button to a personal blog
- Show a floating donation widget on a portfolio site
- Open a donation panel in a modal after user interaction
Ko-Fi React Library vs alternatives
.png?width=64) Ko-Fi React Library |  Saas UI |  Flowbite |  Float UI v2 | .png?width=64) Langfuse | |
|---|---|---|---|---|---|
| Best for | Ko-Fi widgets for React | General React UI library | Tailwind UI components | Startup UI kit | LLM app analytics |
| Pricing | Open source | Free | Free | Free | Subscription |
| DevHunt upvotes | 1 | 54 | 36 | 44 | 89 |
| Launched | Feb 2025 | Jan 2023 | Jan 2024 | Dec 2023 | Jan 2023 |
- Ko-Fi React Library vs Saas UI: Provides a broader set of UI components, not specific to Ko-Fi
- Ko-Fi React Library vs Flowbite: Tailwind-based component library, no donation widgets
- Ko-Fi React Library vs Float UI v2: Startup-focused React components, no Ko-Fi integration
- Ko-Fi React Library vs Langfuse: Observability for LLM apps, unrelated functionality
Ko-Fi React Library FAQ
How do I install the library?+
Run npm install react-kofi and import the components you need.
Do I need TailwindCSS?+
Tailwind is optional; you can use the provided CSS or add Tailwind config for better integration.
Can I customize colors and text?+
Yes, props like color, textColor, label, and radius let you style the widgets.
What is the Ko-Fi ID prop?+
It is your Ko-Fi username from your profile URL, required for the widgets to work.
Is the library open source?+
Yes, the source code is on GitHub under the MIT license.
Summarized by DevHunt from github.com · Sep 29, 2026. Details may change; check the official site.
.png?width=64)
