A modern, open-source UI kit that's flexible and extendable. Source demo: https://jupiterui.codeberg.page/ :: React demo: https://jupiter-ui-demo.vercel.app/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
athena 1281b61c10 Merge pull request 'Version 3.2.1' (#13) from athena/JupiterUI:main into main 3 weeks ago
dist Version 3.2.1 3 weeks ago
html Version 3.2.0 4 weeks ago
src Version 3.2.1 3 weeks ago
.gitignore Pre-production push 2 months ago
Changelog.md Version 3.2.1 3 weeks ago
Gruntfile.js Version 3.2.1 3 weeks ago
LICENSE Version 2.0 1 month ago
README.md Version 3.2.1 3 weeks ago
package.json Version 3.2.1 3 weeks ago



A modern, open-source UI kit that's flexible and extendable.

Project Repository Demo Playground
JupiterUI Source JupiterUI (you're here) Source demo Source playground
JupiterUI React JupiterUI-Components React demo React playground
JupiterUI Docs JupiterUI-Docs null null


JupiterUI is a front-end UI kit for modern websites. It provides a comprehensive compilation of many useuful CSS rules. Ultimately, it's a design system.

About the repo

JupiterUI is split up into a few parts. The repo you're viewing now is the Source. It contains the many SCSS files that make Jupiter possible. Likewise, it also contains some basic JavaScript to perform modern actions—dropdowns, for example.

The other part is the React Components repo. The Source and React Components differ only in the dynamics. That is, they share the same styles, but differ in JavaScript implementation.

What do I use?

If you're building a modern website with a React-based JavaScript framework (namely Create React App, NextJS, Gatsby, Frontity, etc.), you'll want to use the React Components. If you're building a static website without a framework (namely raw HTML, PHP, Wordpress, etc.), you should use the Source.


  • No dependencies!
  • Flexible and easily extendable.
  • High-quality websites (or web apps!) right out-of-the-box.
  • High-quality components that work out-of-the-box.

Get started

Visit the docs to learn how to use it!


The documentation is moderately reductive. Most of the realistic examples can be found in the html/ folder. You see, with how big JupiterUI already is, I don't have the time to write completely comprehensive docs.

With that said, the docs still exist. That is, the source code itself. Since Jupiter uses SCSS, you can easily navigate your way through the src/css folder to find the classes you're looking for.

Need a border class? src/css/styles/border/*.scss

What about a specific Grid layout? src/css/layout/grid.scss

Or an Animation? src/css/interactive/animation/

Getting to the point, if you have any questions or concerns, please email me at: athenacode [at] protonmail [dot] com