Designing a better User Interface has always been a challenge for designers or developers. Designing a UI is tough because “First Impression is the last impression”. No matter how better services you’re offering, if you can’t represent it in a better way! You Are Done!

grey flat screen computer monitor
Photo by Eftakher Alam on Unsplash

“Design is where science and art break even.” — Robin Mathew, Designer

Today we’re sharing best open-source GitHub Repositories For UI/UX You Should Try. Let’s Start

1. Shade

Shade

Mathematically derived gradient explorer

http://jxnblk.com/shade

Setup
Install dependencies npm i
Start development npm start

You can check GitHub repo here

2. Byte Size Icons

A tiny style-controlled SVG iconset

Each icon is hand-coded along a 32×32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square. See demo.

All 101 icons weigh in at 11.7kb minified (3.2kb in SVGZ).

Bytesize Icons
Source: GitHub

You can check GitHub repo here

3. Material Components

Modular and customizable Material Design UI components for the web

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you’re already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

You can check GitHub repo here

4. SVG Pattern Fills

Dark Mode

patternfills (this link opens in a new window) by iros (this link opens in a new window)

A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.

A collection of svg patterns and build scripts that allow utilizing them in svg, css and d3.

See the live site here: http://iros.github.io/patternfills/

patterns
Source: GitHub

This is a collection of svg-based pattern fills that can be used both as SVG patterns defs and CSS background image urls. There is also an example of how one might use pattern fills with d3.js.

A lot of these pattens started from: http://philbit.com/svgpatterns/ which is an amazing project.

You can check GitHub repo here

5. Starability

Accessible rating forms with cute animations on top.

Accessible rating forms with cute animations on top. The name is the combination of two words: star and accessibility (or ability in general, whatever pleases you). Starability ratings are made with HTML, CSS (no JavaScript), and are accessible by keyboard, so even people using screen readers are able to use them. To achieve this effect I am using the sibling combinators technique that was introduced by Lea Verou in “Accessible star rating widget with pure CSS” blogpost, but it is bit upgraded: does not rely on a reverse order of the inputs, what makes it even more accessible. The goal of this small library was to combine the Lea’s technique with neat animations and make it easy to quickly use it on your website.

You can check GitHub repo here

Like This Article? Subscribe to our newsletter! To receive more cool stuff and other important updates from us ❤️

Conclusion

Open Source can be powerful, name a thing, it will be preferably present on GitHub.

Note: Views are expressed only from author, and not from official GitHub, for more detailed view about undertaking read 👉 Our Mission