305 lines
14 KiB
HTML
305 lines
14 KiB
HTML
<h1 id="awesome-building-blocks-for-web-apps-awesome-tweet">Awesome
|
||
Building Blocks for Web Apps <a href="https://awesome.re"><img
|
||
src="https://awesome.re/badge-flat2.svg" alt="Awesome" /></a> <a
|
||
href="https://twitter.com/intent/tweet?text=Here%27s%20a%20list%20of%20standalone%20features%20you%20can%20integrate%20into%20your%20web%20app&url=https://github.com/componently-com/awesome-building-blocks-for-web-apps&via=componently&hashtags=webdev,componently,react,blocks,developers"><img
|
||
src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"
|
||
alt="Tweet" /></a></h1>
|
||
<p><strong>Curated list of standalone features to be integrated into web
|
||
applications: Get full features built by others instead of having to
|
||
write everything yourself.</strong></p>
|
||
<hr>
|
||
<p>If you like these building blocks, check out <a
|
||
href="https://www.componently.com/?utm_source=github-awesome-components&utm_medium=referral&utm_campaign=awesome-list">componently.com</a>,
|
||
a marketplace where developers can search, compare and integrate web
|
||
application building blocks.</p>
|
||
<hr>
|
||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#ui-elements">UI Elements</a></li>
|
||
<li><a href="#exit-intent-popup">Exit Intent Popup</a></li>
|
||
<li><a href="#auth">Auth</a></li>
|
||
<li><a href="#booking">Booking</a></li>
|
||
<li><a href="#notification">Notification</a></li>
|
||
<li><a href="#social">Social</a></li>
|
||
<li><a href="#chat-bot">Chat Bot</a></li>
|
||
<li><a href="#chat">Chat</a></li>
|
||
<li><a href="#monitoring">Monitoring</a></li>
|
||
<li><a href="#content-management">Content Management</a></li>
|
||
<li><a href="#consent-management">Consent Management</a></li>
|
||
<li><a href="#media">Media</a></li>
|
||
<li><a href="#form">Form</a></li>
|
||
<li><a href="#marketing">Marketing</a></li>
|
||
<li><a href="#changelog">Changelog</a></li>
|
||
<li><a href="#telecommunication">Telecommunication</a></li>
|
||
<li><a href="#social-media">Social Media</a></li>
|
||
<li><a href="#search">Search</a></li>
|
||
<li><a href="#feature-flags">Feature flags</a></li>
|
||
<li><a href="#reviews">Reviews</a></li>
|
||
<li><a href="#related-awesome-lists">Related awesome-lists</a></li>
|
||
</ul>
|
||
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
||
<h2 id="ui-elements">UI Elements</h2>
|
||
<ul>
|
||
<li><a href="https://tailwindui.com/">Tailwind UI</a> - UI components,
|
||
by the creators of Tailwind CSS.</li>
|
||
<li><a href="https://webix.com/">Webix</a> - JavaScript UI library and
|
||
framework for displaying data in different ways.</li>
|
||
<li><a href="https://www.highcharts.com/">Highcharts</a> - Interactive
|
||
charts for web.</li>
|
||
<li><a href="https://www.webatoms.in">Webatoms</a> - JavaScript bridge
|
||
for Xamarin.Forms.</li>
|
||
<li><a href="https://www.creative-tim.com/">Creative Tim</a> - Themes
|
||
for React, Angular, Vue, Lavarel and HTML5.</li>
|
||
<li><a href="https://www.syncfusion.com/">Syncfusion</a> - Data
|
||
visualization components and PDF Viewer.</li>
|
||
<li><a href="https://coreui.io/pro/vue">CoreUI</a> - Vue admin
|
||
template.</li>
|
||
<li><a href="https://uifort.com/">UIfort</a> - UI design systems for all
|
||
major frontend frameworks.</li>
|
||
<li><a href="https://semantic-ui.com/">Semantic UI</a> - Open source UI
|
||
component library for React, Meteor, Ember and Angular.</li>
|
||
<li><a href="https://designrevision.com/downloads/shards-pro">Design
|
||
Revision’s Shards Pro</a> - Design blocks for web or mobile apps.</li>
|
||
<li><a href="https://themesberg.com">Themesberg</a> - Bootstrap
|
||
templates, themes and UI kits.</li>
|
||
<li><a href="https://treact.owaiskhan.me/">Treact</a> - React templates
|
||
for landing pages, built on Tailwind CSS.</li>
|
||
<li><a href="https://creativedesignsguru.com">Creative Designs Guru</a>
|
||
- Themes for React, Nextjs and Eleventy, built with Tailwind CSS.</li>
|
||
</ul>
|
||
<h2 id="exit-intent-popup">Exit Intent Popup</h2>
|
||
<ul>
|
||
<li><a href="https://wisepops.com/">Wisepops</a> - Contextual popups,
|
||
banners and bars for mobile and desktop visitors.</li>
|
||
<li><a href="https://www.listagram.com">Listagram</a> - Interactive
|
||
opt-in form for collecting email addresses.</li>
|
||
<li><a href="https://www.poptin.com">Poptin</a> - Popups and forms that
|
||
can be integrated anywhere in the website.</li>
|
||
<li><a href="https://www.embedery.com">Embedery</a> - Popups to engage
|
||
visitors.</li>
|
||
</ul>
|
||
<h2 id="auth">Auth</h2>
|
||
<ul>
|
||
<li><a href="https://auth0.com/">Auth0</a> - Authentication management
|
||
with native support for Angular, React and VueJS.</li>
|
||
<li><a href="https://clerk.com">Clerk</a> – Complete user management UIs
|
||
and APIs, purpose-built for React, Next.js, and the modern web.</li>
|
||
<li><a href="https://firebase.google.com">Firebase</a> - PaaS from
|
||
Google, including authentication management.</li>
|
||
<li><a href="https://www.okta.com/">Okta</a> - Authentication and
|
||
Authorization solution with support for Angular, React and VueJS.</li>
|
||
<li><a href="https://www.onelogin.com/">Onelogin</a> - Authentication
|
||
focussed on company internal applications.</li>
|
||
<li><a
|
||
href="https://azure.microsoft.com/en-us/services/active-directory/#security">Microsoft
|
||
Azure Active Directory</a> - Authentication management in Azure, based
|
||
on Microsoft accounts.</li>
|
||
<li><a href="https://aws.amazon.com/cognito/">AWS Cognito</a> - AWS
|
||
authentication management. Frontend integration is part of <a
|
||
href="https://aws.amazon.com/de/amplify/">AWS Amplify</a>.</li>
|
||
</ul>
|
||
<h2 id="booking">Booking</h2>
|
||
<ul>
|
||
<li><a href="https://calendly.com/">Calendly</a> - Stand-alone booking
|
||
solution.</li>
|
||
<li><a href="https://www.zoho.com/bookings/">Zoho Bookings</a> - Online
|
||
scheduler integrated into Zoho Suite.</li>
|
||
<li><a href="https://acuityscheduling.com/">Acuity Scheduling</a> -
|
||
Appointment scheduling with extensive API.</li>
|
||
<li><a href="https://10to8.com/">10to8</a> - Booking tool with many
|
||
features in the free tier.</li>
|
||
<li><a href="https://www.supersaas.com/">SuperSaaS</a> - Appointment
|
||
scheduling with focus on group scheduling.</li>
|
||
<li><a href="https://simplybook.me/">SimplyBook.Me</a> - Booking tool
|
||
with its own booking directory.</li>
|
||
<li><a href="https://www.oncehub.com/">OnceHub</a> - Scheduling via
|
||
ScheduleOnce and meeting management via InviteOnce.</li>
|
||
<li><a href="https://youcanbook.me/">YouCanBookMe</a> - Online
|
||
scheduling for teams.</li>
|
||
<li><a href="https://www.onsched.com/">OnSched</a> - Scheduling API for
|
||
marketplaces & applications.</li>
|
||
<li><a href="https://www.appointmentplus.com/">AppointmentPlus</a> -
|
||
Appointment scheduling with coupons.</li>
|
||
<li><a href="https://www.booxi.com/">Booxi</a> - Booking and online
|
||
directory components.</li>
|
||
<li><a href="https://get.cogsworth.com/">Cogsworth Scheduler</a> -
|
||
Online Scheduler for business with a powerful API.</li>
|
||
</ul>
|
||
<h2 id="notification">Notification</h2>
|
||
<ul>
|
||
<li><a href="https://onesignal.com/">OneSignal</a> - Mobile and web
|
||
notifications.</li>
|
||
<li><a href="https://notific.io/">Notific</a> - Notifications including
|
||
a PHP SDK.</li>
|
||
<li><a href="https://www.wonderpush.com/">WonderPush</a> - Notifications
|
||
focused on speed.</li>
|
||
<li><a href="https://vwo.com/engage/push-notifications/">VWO Engage</a>
|
||
- Notifications as part of a larger marketing suite.</li>
|
||
<li><a href="https://signalize.com/">Signalize</a> - Free notifications
|
||
with paid analytics add on.</li>
|
||
</ul>
|
||
<h2 id="social">Social</h2>
|
||
<ul>
|
||
<li><a href="https://getstream.io/">Stream</a> - Activity feed &
|
||
chat APIs.</li>
|
||
<li><a href="https://embedsocial.com/products/embedfeed/">EmbedSocial’s
|
||
embedfeed</a> - Social media aggregator.</li>
|
||
</ul>
|
||
<h2 id="chat-bot">Chat Bot</h2>
|
||
<ul>
|
||
<li><a href="https://www.freshworks.com/live-chat-software/">Fresh
|
||
chat</a> - Chatbot in Freshworks support suite.</li>
|
||
<li><a href="https://www.tiledesk.com/">Tiledesh</a> - AI-powered live
|
||
chat.</li>
|
||
</ul>
|
||
<h2 id="chat">Chat</h2>
|
||
<ul>
|
||
<li><a href="https://www.daily.co/">Daily.co</a> - Video chat.</li>
|
||
</ul>
|
||
<h2 id="monitoring">Monitoring</h2>
|
||
<ul>
|
||
<li><a href="https://sentry.io/">Sentry</a> - Full-stack error
|
||
monitoring with release management included.</li>
|
||
<li><a href="https://raygun.com/platform/crash-reporting">Raygun Crash
|
||
Reporting</a> - Error monitoring as part of the Raygun suite.</li>
|
||
<li><a href="https://www.honeybadger.io/">Honeybadger</a> - Error,
|
||
uptime and check-in monitoring.</li>
|
||
<li><a href="https://rollbar.com/">Rollbar</a> - Error monitoring with
|
||
the ability to replay HTTP requests that caused errors.</li>
|
||
</ul>
|
||
<h2 id="content-management">Content Management</h2>
|
||
<ul>
|
||
<li><a href="https://www.contentful.com">Contentful</a> - Headless
|
||
content management system.</li>
|
||
</ul>
|
||
<h2 id="consent-management">Consent Management</h2>
|
||
<ul>
|
||
<li><a href="https://cookiefirst.com/">Cookiefirst</a> - Cookie consent
|
||
manager.</li>
|
||
<li><a href="https://usercentrics.com/">usercentrics</a> - Compliance
|
||
manager that can be implemented as part of existing pages.</li>
|
||
<li><a href="https://www.sourcepoint.com/">Sourcepoint</a> - Compliance
|
||
management as part of a suite including also ad blocker recovery.</li>
|
||
<li><a href="https://piwik.pro/gdpr-consent-manager/">PiwikPro</a> -
|
||
Compliance management as part of an analytics tool.</li>
|
||
<li><a href="https://www.consentmanager.de/">Consent Management
|
||
Provider</a> - German management tool for Cookie Consent.</li>
|
||
<li><a href="https://www.uniconsent.com/">UniConsent</a> - Consent
|
||
management platform for GDPR, CCPA, COPPA compliance.</li>
|
||
<li><a href="https://trustarc.com/">TrustArc</a> - Privacy management
|
||
for the CCPA, GDPR, LGPD and 900+ other global regulations.</li>
|
||
<li><a href="https://www.cookiebot.com/">Cookiebot</a> - Cookie tracking
|
||
manager.</li>
|
||
<li><a href="https://www.iubenda.com/">iubenda</a> - Consent management
|
||
and terms and conditions generator.</li>
|
||
<li><a href="https://www.civicuk.com/cookie-control/">Civic Cookie
|
||
Control</a> - Smaller Cookie and GDPR compliance product.</li>
|
||
<li><a href="https://www.ccm19.de/">CCM19</a> - German cookie consent
|
||
manager.</li>
|
||
<li><a href="https://cookieinformation.com/">CookieInformation</a> -
|
||
Focus on compliance reporting via a dashboard.</li>
|
||
<li><a href="https://www.cookiepro.com/">CookiePro</a> - Cookie
|
||
management as part of a privacy management solution.</li>
|
||
<li><a href="https://github.com/Mastermindzh/react-cookie-consent">React
|
||
Cookie Consent</a> - A small and customizable cookie consent bar for
|
||
React applications.</li>
|
||
<li><a href="https://github.com/buildo/react-cookie-banner">React Cookie
|
||
Banner</a> - React cookie banner which can be automatically dismissed
|
||
with a scroll.</li>
|
||
</ul>
|
||
<h2 id="media">Media</h2>
|
||
<ul>
|
||
<li><a href="https://mux.com/">Mux</a> - Stream hosted and live
|
||
videos.</li>
|
||
<li><a
|
||
href="https://developer.spotify.com/documentation/web-playback-sdk/">Spotify
|
||
web playback SDK</a> - Client-side JavaScript library which allows you
|
||
to create a new player in Spotify Connect and play any audio track from
|
||
Spotify in the browser via encrypted media extensions.</li>
|
||
</ul>
|
||
<h2 id="form">Form</h2>
|
||
<ul>
|
||
<li><a href="https://www.staticforms.xyz/">Static Forms</a> - Form that
|
||
sends its results to your email.</li>
|
||
<li><a
|
||
href="https://flyingforms.io/?utm_source=github-awesome-components&utm_medium=referral&utm_campaign=awesome-list">FlyingForms</a>
|
||
- Building, versioning and managing forms.</li>
|
||
</ul>
|
||
<h2 id="marketing">Marketing</h2>
|
||
<ul>
|
||
<li><a href="https://trustpulse.com/">TrustPulse</a> - Shows recent
|
||
buyers on your website.</li>
|
||
</ul>
|
||
<h2 id="changelog">Changelog</h2>
|
||
<ul>
|
||
<li><a href="https://www.getbeamer.com">Beamer</a> - Combination of push
|
||
notifications and changelog management.</li>
|
||
<li><a href="https://changelogfy.com/">Changelogfy</a> - A product
|
||
release notes tool.</li>
|
||
<li><a href="https://changefeed.app/">Changefeed</a> - Changelog as
|
||
stand-alone page or embeddable widget.</li>
|
||
<li><a href="https://canny.io/features/changelog">Canny’s Changelog</a>
|
||
- Combines changelog with product roadmaps.</li>
|
||
<li><a href="https://www.productflare.com/changelog">ProductFlare’s
|
||
Changelog</a> - Changelog widget around a product team task management
|
||
system.</li>
|
||
<li><a href="https://changes.blue">Changes</a> - Changelog building
|
||
kit.</li>
|
||
</ul>
|
||
<h2 id="telecommunication">Telecommunication</h2>
|
||
<ul>
|
||
<li><a href="https://www.vonage.com/">Vonage</a> - Voice, messaging,
|
||
video and data capabilities across unified communications, contact
|
||
centers and communications APIs.</li>
|
||
</ul>
|
||
<h2 id="social-media">Social Media</h2>
|
||
<ul>
|
||
<li><a href="https://www.addthis.com/">AddThis</a> - Social sharing
|
||
buttons, available on AMPs.</li>
|
||
<li><a href="https://sharethis.com/">ShareThis</a> - Social sharing
|
||
buttons.</li>
|
||
<li><a href="https://www.addtoany.com/">AddToAny</a> - Sharing buttons
|
||
for many different target services.</li>
|
||
</ul>
|
||
<h2 id="search">Search</h2>
|
||
<ul>
|
||
<li><a href="https://www.algolia.com/">Algolia</a> - Search for your
|
||
application.</li>
|
||
<li><a href="https://github.com/elastic/search-ui">Search UI</a> - UI
|
||
integration for ElastiSearch.</li>
|
||
</ul>
|
||
<h2 id="feature-flags">Feature flags</h2>
|
||
<ul>
|
||
<li><a href="https://www.optimizely.com/rollouts">Optimizely’s
|
||
Rollouts</a> - Feature flags combined with A/B testing.</li>
|
||
<li><a href="https://launchdarkly.com/">LaunchDarkly</a> - Feature
|
||
management with multiple integrations in CI servers and ticketing
|
||
systems.</li>
|
||
<li><a href="https://www.split.io/">Split</a> - Another feature
|
||
management with multiple integrations in CI servers and ticketing
|
||
systems.</li>
|
||
<li><a href="https://rollout.io/">Rollout</a> - Feature management
|
||
focusing on segmented roll-out of features.</li>
|
||
</ul>
|
||
<h2 id="reviews">Reviews</h2>
|
||
<ul>
|
||
<li><a href="https://justreview.co/">JustReview</a> - Collect reviews
|
||
from e-commerce, social media and review service providers and embed on
|
||
a website.</li>
|
||
<li><a href="https://reviewsonmywebsite.com/">ReviewsOnMyWebsite</a> -
|
||
Collect, monitor and display customer reviews.</li>
|
||
</ul>
|
||
<h2 id="related-awesome-lists">Related awesome-lists</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mateusortiz/webcomponents-the-right-way">Web
|
||
Components</a></li>
|
||
<li><a
|
||
href="https://github.com/mfornos/awesome-microservices">Microservices</a></li>
|
||
<li><a
|
||
href="https://github.com/ChristianUlbrich/awesome-microfrontends">Micro
|
||
Frontends</a></li>
|
||
</ul>
|