Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brillout/awesome-frontend-libraries

Catalog of Frontend UI Libraires
https://github.com/brillout/awesome-frontend-libraries

List: awesome-frontend-libraries

Last synced: about 1 month ago
JSON representation

Catalog of Frontend UI Libraires

Awesome Lists containing this project

README

        

# UI Components

### Charts

- [chart.js](https://github.com/chartjs/Chart.js)
- [echarts](https://github.com/ecomfe/echarts)

### Maps

- [leaflet](https://github.com/Leaflet/Leaflet)
- [gmaps](https://github.com/HPNeo/gmaps)
- [mapbox.js](https://github.com/mapbox/mapbox.js)
- [openlayers](https://github.com/openlayers/openlayers)

#### 3D

- [cesium](https://github.com/AnalyticalGraphicsInc/cesium)

### Carousel

- [swiper](https://github.com/nolimits4web/Swiper)
- [flickity](https://github.com/metafizzy/flickity)

###### Overlay

*Overlay / modal / alert / dialog / lightbox / popup*

- [sweetalert](https://github.com/t4t5/sweetalert)

### Notification

*Toaster / snackbar — Notify the user with a modeless temporary little popup*

- [humane-js](https://github.com/wavded/humane-js)
- [notie](https://github.com/jaredreich/notie)

### Loader

*Let the user know that something is loading*

- [ladda](https://github.com/hakimel/Ladda)

#### Spinner

- [spin.js](https://github.com/fgnass/spin.js)
- [spinkit](https://github.com/tobiasahlin/SpinKit)

#### Progress bar

- [mprogress](https://github.com/lightningtgc/MProgress.js)
- [nprogress](https://github.com/rstacruz/nprogress)
- [progressbar.js](https://github.com/kimmobrunfeldt/progressbar.js)
- [topbar](https://github.com/buunguyen/topbar)
- [nanobar](https://github.com/jacoborus/nanobar)

### Tooltip

- [hint.css](https://github.com/chinchang/hint.css)

### Menu

- [slideout](https://github.com/mango/slideout)

### Header

*Fixed headers / scroll-up headers / sticky elements*

- [headroom.js](https://github.com/WickyNilliams/headroom.js)

### Drag and Drop
- [dragula](https://github.com/bevacqua/dragula)

### File Upload
- [dropzone](https://github.com/enyo/dropzone)
- [@flowjs/flow.js](https://github.com/flowjs/flow.js)
- [fine-uploader](https://github.com/FineUploader/fine-uploader)

### PDF

- [pdfjs-dist](https://github.com/mozilla/pdf.js)

### Media

- [mediaelement](https://github.com/johndyer/mediaelement)

#### Video

- [video.js](https://github.com/videojs/video.js)
- [flowplayer](https://github.com/flowplayer/flowplayer)
- [clappr](https://github.com/clappr/clappr)

#### Audio

- [SoundJS](https://github.com/CreateJS/SoundJS)

### Image Gallery
- [photoswipe](https://github.com/dimsemenov/PhotoSwipe)
- [baguettebox.js](https://github.com/feimosi/baguetteBox.js)

### Rich Text Editors
- [quill](https://github.com/quilljs/quill)
- [medium-editor](https://github.com/yabwe/medium-editor)

### Parallax

- [parallax-js](https://github.com/wagerfield/parallax)
- [scrollmonitor-parallax](https://github.com/stutrek/scrollmonitor-parallax)

### Code highlighting
- [prismjs](https://github.com/PrismJS/prism)
- [highlight.js](https://github.com/isagalaev/highlight.js)

### Form

*Let the user enter data*

#### Date / Time picker

*Date picker / time picker / datetime picker / date range picker*

- [pikaday](https://github.com/dbushell/Pikaday)
- [rome](https://github.com/bevacqua/rome)

#### Input Types

*Masked inputs, specialized inputs; email / telephone number / credit card / etc.*

- [vanilla-masker](https://github.com/fernandofleury/vanilla-masker)

#### Autocomplete

*Autosuggest / autocomplete / typeahead*

- [awesomplete](https://github.com/LeaVerou/awesomplete)

#### Range slider
- [nouislider](https://github.com/leongersen/noUiSlider)

#### Source Code Editor
- [codemirror](https://github.com/codemirror/CodeMirror)

# UI Animation
- [velocity-animate](https://github.com/julianshapiro/velocity)
- [mo-js](https://github.com/legomushroom/mojs)
- [animejs](https://github.com/juliangarnier/anime)

# UI Layout

*Layout the overall / main view*

- [scrollreveal](https://github.com/jlmakes/scrollreveal)
- [masonry-layout](https://github.com/desandro/masonry)
- [sequencejs](https://github.com/IanLunn/Sequence)

## Responsive Design

- [flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid)

# UI Utilities

## Reporters

*Report changes about a DOM element*

### Scroll

- [scrollmonitor](https://github.com/stutrek/scrollMonitor)

## Device Input

*Turn user input into actions*

### Touch Events

- [hammerjs](https://github.com/hammerjs/hammer.js)

### Scroll

- [iScroll](https://github.com/cubiq/iscroll)

## Image backgrounds

- [multiple.js](https://github.com/NeXTs/Multiple.js)

## Clipboard

- [clipboard](https://github.com/zenorocha/clipboard.js)

## HTTP requests

- [axios](https://github.com/mzabriskie/axios)
- [whatwg-fetch](https://github.com/github/fetch)

## HTML5 support

- [modernizr](https://github.com/Modernizr/Modernizr)

# UI Performance

## Large Lists

*Display large lists*

- [clusterize.js](https://github.com/NeXTs/Clusterize.js)

## List Filter

*Filter large lists*

- [jets](https://github.com/NeXTs/Jets.js)

# UI Frameworks

## Responsive

- [bootstrap](https://github.com/twbs/bootstrap)
- [semantic-ui](https://github.com/Semantic-Org/Semantic-UI)

## Layout

*Framework to layout your app in a specific way*

- [fullpage.js](https://github.com/alvarotrigo/fullPage.js)

# Scaffold

- [html5-boilerplate](https://github.com/h5bp/html5-boilerplate)
- [MEAN Stack](https://github.com/linnovate/mean)

# Dev tools

- [json-server](https://github.com/typicode/json-server)

## Package manager

- [npm](https://github.com/npm/npm)
- [jspm](https://github.com/jspm/jspm-cli)

## Module loader

- [systemjs](https://github.com/systemjs/systemjs)