Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. Radix Primitives
An open-source UI component library for building high-quality, accessible design systems and web apps.
radix-ui / primitives
An open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @modulz.
Radix Primitives
An open-source UI component library for building high-quality, accessible design systems and web apps.
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
Documentation
For full documentation, visit radix-ui.com/docs/primitives.
Contributing
Please follow our contributing guidelines.
Authors
- Benoit Grelard (@benoitgrelard) - Modulz
- Jenna Smith (@jjenzz) - Modulz
- Andy Hook (@Andy_Hook) - Modulz
- Pedro Duarte (@peduarte) - Modulz
- Chance Strickland (@chancethedev)
Contributors
Community
2. superset-ui
Collection of packages that power the Apache Superset UI, and can be used to craft custom data applications that leverage a Superset backend.
apache-superset / superset-ui
Apache Superset UI packages
@superset-ui
Collection of packages that power the
Apache Superset UI, and can be used to craft custom
data applications that leverage a Superset backend
Demo
Most recent release: https://apache-superset.github.io/superset-ui/
Current master: https://superset-ui.now.sh/
Packages
Core packages
Chart plugin packages
@superset-ui/legacy-*
packages are extracted from the classic
Apache Superset and converted into plugins. These
packages are extracted with minimal changes (almost as-is). They also depend on legacy API
(viz.py
) to function.
@superset-ui/plugin-*
packages are newer and higher quality in general. A key difference that they
do not depend on viz.py
(which contain visualization-specific python code) and interface with
/api/v1/query/
, a new generic endpoint instead meant to serve all visualizations, instead. Also
should be written in Typescript.
Package | Version |
---|
3. Next.js Subscription Payments Starter
Clone, deploy, and fully customize a SaaS subscription application with Next.js.
vercel / nextjs-subscription-payments
Clone, deploy, and fully customize a SaaS subscription application with Next.js.
Next.js Subscription Payments Starter
The all-in-one starter kit for high-performance SaaS applications.
Features
- Secure user management and authentication with Supabase
- Powerful data access & management tooling on top of PostgreSQL with Supabase
- Integration with Stripe Checkout and the Stripe customer portal
- Automatic syncing of pricing plans and subscription statuses via Stripe webhooks
Demo
Architecture
Deploy with Vercel
The Vercel deployment will guide you through creating a Supabase account and project. After installing the Supabase integration, you'll need to configure Stripe with a few simple steps.
Note: We're working on our Stripe integration. We've documented the required steps below under "Configure Stripe" until the integration is ready.
To get started, click the "Deploy with Vercel" button below.
Once the project has deployed, continue with the configuration steps below.
The initial build will fail due to missing Stripe environment variables. After configuring Stripe, redeploy the application.
Configure Supabase Auth
[Optional] -
…4. Markdown PDF
Node module that converts Markdown files to PDFs.
alanshaw / markdown-pdf
📄 Markdown to PDF converter
markdown-pdf
Node module that converts Markdown files to PDFs.
The PDF looks great because it is styled by HTML5 Boilerplate. What? - Yes! Your Markdown is first converted to HTML, then pushed into the HTML5 Boilerplate index.html
. Phantomjs renders the page and saves it to a PDF. You can even customise the style of the PDF by passing an optional path to your CSS and you can pre-process your markdown file before it is converted to a PDF by passing in a pre-processing function, for templating.
Install
npm install -g markdown-pdf --ignore-scripts
Note: elevated (sudo) permissions may be needed for npm install -g
Usage
Usage: markdown-pdf [options] <markdown-file-path>
Options
-h, --help output usage information
-V, --version output the version number
<markdown-file-path> Path of the markdown file to convert
-c, --cwd [path] Current working directory
-p, --phantom-path [path] Path to phantom binary
-h, --runnings-path [path] Path to runnings (header, footer)
…5. Bumbag
Build accessible & themeable React applications with your Bumbag
Getting started
Visit the Bumbag docs to get started with Bumbag.
Join our community
Join our discord server to get the latest updates, chat with other Bumbag enthusiasts, and see what's happening in the community!
Contributing
Feel like contributing? That's awesome! We have a Contributing guide to help you out
6. Serverless Framework
Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more!
serverless / serverless
⚡ Serverless Framework – Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more! –
English | 简体中文
Website • Docs • Newsletter • Swag • Gitter • Forum • Meetups • Twitter • We're Hiring
The Serverless Framework – Build applications comprised of microservices that run in response to events, auto-scale for you, and only charge you when they run. This lowers the total cost of maintaining your apps, enabling you to build more logic, faster.
The Framework uses new event-driven compute services, like AWS Lambda, Google Cloud Functions, and more. It's a command-line tool, providing scaffolding, workflow automation and best practices for developing and deploying your serverless architecture. It's also completely extensible via plugins.
Check out the Serverless Framework Dashboard for monitoring, troubleshooting, ci/cd and more features for serverless teams.
Serverless is actively maintained by Serverless Inc.
Contents
7. Material-UI Treasury
A collection of ready-to-use components based on Material-UI
siriwatknp / mui-treasury
A collection of ready-to-use components based on Material-UI
Material-UI Treasury
Imagine a place with millions of real-world, ready-to-use, and themable components that you can install to your project. I believe that it will boost many projects that want to prove their ideas or even improve complex monolith project to move faster.
Material-UI v5
@mui-treasury/layout
BREAKING CHANGE see v5 documentation
Summary Highlight
- smaller bundle size (-30%)
- faster
- single sidebar (no duplicate for all variants)
@mui-treasury/components, @mui-treasury/styles
- upgrade material-ui
yarn add @material-ui/core@next @material-ui/styles@next
// make sure that it is 5.0.0-alpha.37
Note: the above installation requires
@material-ui/styles
because mui-treasury depends on it.
- upgrade mui-treasury
yarn add @mui-treasury/components@next @mui-treasury/styles@next
As a result, you will get 2.0.0-alpha
for both packages. However, these packages still use the old style-engine (JSS) while material-ui v5 have moved to either emotion or styled-components. This will increase the bundle size a bit because you will have 2 style-engine in the project (JSS + emotion or styled-components).
In the…
8. Marked
A markdown parser and compiler. Built for speed.
Marked
-
⚡ built for speed -
⬇️ low-level compiler for parsing markdown without caching or blocking for long periods of time -
⚖️ light-weight while implementing all markdown features from the supported flavors & specifications -
🌐 works in a browser, on a server, or from a command line interface (CLI)
Demo
Checkout the demo page to see marked in action
Docs
Our documentation pages are also rendered using marked
Also read about:
Compatibility
Node.js: Only current and LTS Node.js versions are supported. End of life Node.js versions may become incompatible with Marked at any point in time.
Browser: Not IE11 :)
Installation
CLI: npm install -g marked
In-browser: npm install marked
Usage
Warning: 🚨 Marked does not sanitize the output HTML. Please use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML! 🚨
CLI
$ marked -o hello.html
hello world
^D
$ cat hello.html
…9. nodemon
Monitor for any changes in your node.js application and automatically restart the server - perfect for development
remy / nodemon
Monitor for any changes in your node.js application and automatically restart the server - perfect for development
nodemon
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
nodemon does not require any additional changes to your code or method of development. nodemon is a replacement wrapper for node
. To use nodemon
, replace the word node
on the command line when executing your script.
Installation
Either through cloning with git or by using npm (the recommended way):
npm install -g nodemon # or using yarn: yarn global add nodemon
And nodemon will be installed globally to your system path.
You can also install nodemon as a development dependency:
npm install --save-dev nodemon # or using yarn: yarn add nodemon -D
With a local installation, nodemon will not be available in your system path or you can't use it directly from the command line. Instead, the local installation of nodemon can be…
10. Highcharts
Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.
highcharts / highcharts
Highcharts JS, the JavaScript charting framework
Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.
- Official website: www.highcharts.com
- Download page: www.highcharts.com/download
- Licensing: www.highcharts.com/license
- Support: www.highcharts.com/support
- Issues: Repo guidelines
Download and install Highcharts
This is the working repo for Highcharts. If you simply want to include Highcharts into a project, use the distribution package instead, or read the download page. Please note that there are several ways to use Highcharts. For general installation instructions, see the docs.
Use our CDN
Instead of downloading, you can use our CDN to access files directly. See code.highcharts.com for details.
<script src="https://code.highcharts.com/highcharts.js"></script>
Install from npm
See npm documentation on how to get started with npm.
npm install --save highcharts
Install from Bower
Bower is deprecated, but to install, run:
bower install highcharts
Load Highcharts from the CDN as ECMAScript modules
Starting with v6.1.0, Highcharts is available on our…
Stargazing 📈
Top risers over last 7 days🔗
- Web Development for Beginners +1,797 stars
- Machine Learning for Beginners +1,793 stars
- Electron +1,433 stars
- Free Code Camp +1,174 stars
- Daisy UI +1,060 stars
Top growth(%) over last 7 days🔗
- Daisy UI +38%
- html-to-image +35%
- accessibility-snippets +21%
- Welcome UI +16%
- Mammoth +15%
Top risers over last 30 days🔗
- Public APIs +9,189 stars
- Machine Learning for Beginners +8,187 stars
- Coding Interview University +5,507 stars
- Free Programming Books +3,203 stars
- Web Development for Beginners +3,135 stars
Top growth(%) over last 30 days🔗
- Fullstack Boilerplate +180%
- Machine Learning for Beginners +110%
- Fronts +110%
- Captain Stack +79%
- Astro +69%
For all for the latest rankings please checkout Stargazing.dev
Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (1)
Great list!