A component-first UI kit that's flexible and extendable. https://jupiterui.codeberg.page/
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.
 
 
 

2.5 KiB

JupiterUI

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

About

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.

What does Jupiter do for me?

  • High-class, working components right out of the box.
  • Support for dynamic theme colors and dark mode right out of the box.
  • Styles work the same for React sites as they do for Wordpress websites (allowing you to share styles between projects)
  • Exceptional CSS layout coverage. From simple Flex layouts to more complicated Grid layouts, Jupiter has a lot of support.
  • many more.

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.

Features

  • 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!

Questions?

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