Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/logeshpaul/ui-components

Most used UI Components — of web applications. Curated/Most loved components for web development
https://github.com/logeshpaul/ui-components
css css-framework helpers html javascript javascript-library jquery-plugin utility-library
Last synced: 2 months ago
JSON representation
Most used UI Components — of web applications. Curated/Most loved components for web development
Host: GitHub
URL: https://github.com/logeshpaul/ui-components
Owner: logeshpaul
License: mit
Created: 2015-07-02T05:26:13.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2017-08-23T08:13:27.000Z (over 7 years ago)
Last Synced: 2024-10-12T23:45:58.596Z (3 months ago)
Topics: css, css-framework, helpers, html, javascript, javascript-library, jquery-plugin, utility-library
Homepage:
Size: 21.5 KB
Stars: 172
Watchers: 11
Forks: 13
Open Issues: 0
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project

README

        # UI Components

Almost most of the UI components you use in your web applications as a collection.

#### Why Name UI Components?

There is a misleading word used in the industry. Let's say you need an image carousel.

You search in google and find out one which fits your needs & the name of it is `jQuery Carousel` you call it a jQuery plugin to your web application. It's not just jQuery, it's a combination of HTML, CSS and JS.

It's just a UI Component Plugin which uses jQuery instead of raw javascript, and that's where the idea of creating a repo for UI components arose.

To answer a 6 year old: it's a piece of the web layout.

#### What's this repo for?

You can use this repo as a reference to find different UI Components for your day-to-day web development.

Explore the categories a) [Components](#components) and b) [Components Helper](#component-helpers).

Raise an issue to add your component to this repo.

## Components

- [Accordion](#accordion)

- [Audio](#audio)

- [Checkboxes / Radio Buttons](#checkboxes--radio-buttons)

- [Date Picker](#date-picker)

- [File Upload](#file-upload)

- [Images](#images)

- [Maps](#maps)

- [Navigation](#navigation)

- [Select Box](#select-box)

- [Tool Tip](#tool-tip)

- [Video](#video)

- [Web Editor (WYSIWYG)](#web-editor-wysiwyg)

#### Accordion

| Title  | Description |

| ------ | ----------- |

| [Animated Content Tabs with CSS3](http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/) | Codrops |

| [CSS + HTML only accordion element](http://codepen.io/abergin/pen/ihlDf) | Codepen by Alex Bergin |

| [CSS Responsive Animated Accordion](http://codepen.io/chriswrightdesign/pen/cmanI) | Codepen by Chris Wright |

| [Bootstrap Accordion](http://getbootstrap.com/javascript/#collapse-example-accordion) | Twitter Bootstrap |

| [jQuery UI Accordion](https://jqueryui.com/accordion/) | jQuery UI |

| [Multiple Nesting](https://codepen.io/brenden/pen/Kwbpyj) | A simple jQuery Accordion with unlimited nesting |

^{[(back to components)](#components)}

####  Audio

| Title  | Description |

| ------ | ----------- |

| [howler.js](http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library) | Modern Web Audio Javascript Library |

| [SoundJS](http://createjs.com/SoundJS) | Audio library + simple interface |

| [Blip](http://jshanley.github.io/blip/) | Web Audio API wrapper |

| [SoundCite](http://soundcite.knightlab.com/) | Inline audio player |

^{[(back to components)](#components)}

####  Checkboxes / Radio Buttons

| Title  | Description |

| ------ | ----------- |

| [iCheck](http://damirfoy.com/iCheck/) | Super customized & Flat radio and checkboxes|

| [Screw Default Buttons](http://www.screwdefaultbuttons.com/) | Replace default button with custom images. |

| [iPhone Switch Style](http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html) | Pretty smooth iPhone like switch |

^{[(back to components)](#components)}

####  Date Picker

| Title  | Description |

| ------ | ----------- |

| [date for humans](http://date.js.org/) | Date for Humans |

| [Timepicker](http://trentrichardson.com/examples/timepicker/) | Adding a Timepicker to jQuery UI Datepicker |

| [Zebra_Datepicker](http://stefangabos.ro/jquery/zebra-datepicker/) | A lightweight datepicker jQuery plugin |

^{[(back to components)](#components)}

####  File Upload

| Title  | Description |

| ------ | ----------- |

| [jQuery File Upload](http://blueimp.github.com/jQuery-File-Upload/) | Multiple file selection, Drag & Drop support, Progress bars, Preview images & Works with most server-side platforms. |

| [Uploadify](http://www.uploadify.com/) | HTML5 or Flash multiple file upload jQuery plugin script. |

| [Dropzone](http://www.dropzonejs.com/) | DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. |

^{[(back to components)](#components)}

####  Images

| Title  | Description |

| ------ | ----------- |

| [layzr.js](https://github.com/callmecavs/layzr.js) | A small, fast, modern, and dependency-free library for lazy loading images. |

| [ImageLoader.js](http://nick-jonas.github.com/imageloader/) | Preload Images |

| [imagesloaded](https://github.com/desandro/imagesloaded) | ImagesLoaded |

^{[(back to components)](#components)}

####  Maps

| Title  | Description |

| ------ | ----------- |

| [leaflet.js](http://leafletjs.com/) | An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps |

| [jvectormap](http://jvectormap.com/) | Interactive vector world map |

| [gmaps.js](http://hpneo.github.com/gmaps/) | Google maps api with less pain and more fun |

| [planetaryjs](http://planetaryjs.com/) | Awesome interactive globes for the web |

| [openlayers3](http://openlayers.org/) | Mapping library that supports different projections |

^{[(back to components)](#components)}

####  Navigation

| Title  | Description |

| ------ | ----------- |

| [Slideout.js](https://mango.github.io/slideout/) | A touch slideout navigation menu for your mobile web apps. |

| [Navigation Sidebar with Toggle](http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle) | Sidebar with toggle for bootstrap |

^{[(back to components)](#components)}

####  Select Box

| Title  | Description |

| ------ | ----------- |

| [Selectivity](https://arendjr.github.io/selectivity/) | Modular and light-weight selection library for jQuery and Zepto.js |

| [Select2](https://select2.github.io/) | Features which select API missing |

| [Chosen](http://harvesthq.github.com/chosen/) | Modern, Customizable, More user-friendly |

| [ddSlick](http://designwithpc.com/Plugins/ddSlick) | Allows you to create a custom drop down with images and description. |

| [Selectize](http://brianreavis.github.io/selectize.js/) | hybrid of a textbox and `` box. |

^{[(back to components)](#components)}

####  Tool Tip

| Title  | Description |

| ------ | ----------- |

| [Tooltipster](http://calebjacob.com/tooltipster/) | enables you to easily create clean, HTML5 validated tooltips. |

| [tipsy](http://onehackoranother.com/projects/jquery/tipsy/) | Facebook style - Black Bg tooltips effect based on an anchor tag's title attribute. |

| [Hovercard](http://designwithpc.com/Plugins/Hovercard) | display related information with the hovered label, link, or any html element of your choice. |

| [Toolbar.Js](http://paulkinzett.github.com/toolbar/) | A jQuery plugin that creates tooltip style toolbars |

| [Tipped](http://projects.nickstakenburg.com/tipped) | Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. |

^{[(back to components)](#components)}

####  Video

| Title  | Description |

| ------ | ----------- |

| [Videojs](http://www.videojs.com/) | Open source HTML5 video player |

| [MediaElement.js](http://mediaelementjs.com/) | HTML5 Video & Audio player for all browsers with the same UI. Includes the Flash fallback for IE7+ |

| [Plyr](http://plyr.io/) | A simple HTML5 media player with custom controls and WebVTT captions |

| [Fitvid](http://fitvidsjs.com/) | Responsive videos |

| [BIDEO.JS](https://rishabhp.github.io/bideo.js/) | Fullscreen background videos |

| [Covervid](http://stefanerickson.github.io/covervid/) | HTML5 video behave like a background cover image |

| [Coverr](http://www.coverr.co/) | Beautiful, free videos for your homepage |

^{[(back to components)](#components)}

####  Web Editor (WYSIWYG)

| Title  | Description |

| ------ | ----------- |

| [CKEditor](http://ckeditor.com/) | Simple to use and can be modified in any way you want. |

| [Redactor](http://imperavi.com/redactor/) | Limitless flexibility and extensibility, simple and super-efficient API and amazing user experience. |

^{[(back to components)](#components)}

## Component Helpers

- [Data Manipulation](#data-manipulation)

- [Data Visualization](#data-visualization)

- [Events](#events)

- [HTML5 Placeholder](#html5-placeholder)

- [Loaders](#loaders)

- [Notification](#notifications)

- [Presentation](#presentation)

- [Time](#time)

- [Validation](#validation)

#### Data Manipulation

- [String.js](http://stringjs.com/) - JavaScript library for the browser or for Node.js that provides extra String methods

- [Numeral.js](http://numeraljs.com/) - A javascript library for formatting and manipulating numbers.

- [Money.js](http://josscrowcroft.github.com/money.js/) - JavaScript currency conversion library, done right - with no dependencies. Works seamlessly with data from the [Open Exchange Rates API](http://openexchangerates.org/)

- [Accounting.js](http://josscrowcroft.github.com/accounting.js/) - JavaScript library for number, money and currency formatting, with optional excel-style column rendering (to line up symbols and decimals). It's lightweight, fully localisable and has zero dependencies.

- [Formula.js](http://stoic.com/formula/) - JavaScript implementation of most formula functions supported by Microsoft Excel 2013 and Google Spreadsheets

^{[(back to component helpers)](#component-helpers)}

#### Data Visualization

- [Charts.js](https://github.com/nnnick/Chart.js) - Simple HTML5 Charts using the `` tag

- [Textures.js](http://riccardoscalco.github.io/textures/) - SVG patterns for Data Visualization

- [Drawingboard.js](http://leimi.github.io/drawingboard.js/) - Create a drawing board on the web using this library

^{[(back to component helpers)](#component-helpers)}

#### Events

- [jQuery Outside Events](http://benalman.com/projects/jquery-outside-events-plugin/) - clickoutside, dbclickoutside, etc.,

- [KeyPress](http://dmauro.github.io/Keypress/) - A robust Javascript library for capturing keyboard input

^{[(back to component helpers)](#component-helpers)}

#### HTML5 Placeholder:

- [jQuery-html5-placeholder-shim](https://github.com/jcampbell1/jquery-html5-placeholder-shim) - Just include the js, your'e done!

- [Simple Placeholder](https://github.com/marcgg/Simple-Placeholder) - Lightweight. Required - jQuery.

- [Cross Browser Placeholder](http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text) - Requires jQuery & Modernizer.

^{[(back to component helpers)](#component-helpers)}

#### Loaders

- [Percentage Loader](http://widgets.better2web.com/loader/) - jQuery plugin for displaying progress in a visual and engaging way

- [Hook.js](http://usehook.com/) - Pull to refresh. For the web.

- [Pace](http://github.hubspot.com/pace/docs/welcome/) - Automatic page loading progress bar (Youtube loading bar clone)

^{[(back to component helpers)](#component-helpers)}

#### Notifications

- [favico.js](http://lab.ejci.net/favico.js/) - Make use of your favicon with badges, images or videos

- [Notificon](https://github.com/makeable/Notificon) - Favicon Notifications / Alerts

- [Piecon](http://lipka.github.com/piecon/) - Pie charts in your favicon!

^{[(back to component helpers)](#component-helpers)}

#### Presentation

- [Reveal.js](http://lab.hakim.se/reveal-js/#/) - An HTML presentation framework

- [Impress.js](http://bartaz.github.io/impress.js/#/bored) - Presentation which uses the power of css to show different animation effects.

- [Intro.js](http://usablica.github.io/intro.js/) - Better introductions for websites and features with a step-by-step guide for your projects.

- [Website Tour](http://tympanus.net/codrops/2010/12/21/website-tour/) - Explain to your users the functioning of your web application in an interactive way

^{[(back to component helpers)](#component-helpers)}

#### Time

- [Moment.js](http://momentjs.com/) - Javascript date library for parsing, validating, manipulating, and formatting dates.

- [Countdown.js](http://countdownjs.org/) - JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances

- [Smart Time Ago](http://pragmaticly.github.com/smart-time-ago/) - jQuery library to update the relative timestamps in your document intelligently.

- [timeago](http://timeago.yarp.com/) - Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps

^{[(back to component helpers)](#component-helpers)}

#### Validation

- [Parsley.js](http://parsleyjs.org/) - Validate your forms, frontend, without writting a single line of javascript!

- [Validate.js](http://rickharrison.github.com/validate.js/) - Lightweight JavaScript form validation library inspired by CodeIgniter.

- [Validate Jquery](http://jqueryvalidation.org/) - Form validation with jQuery

- [jQuery Credit Card Validator](http://paweldecowski.github.com/jQuery-CreditCardValidator/) - Detects and validates credit card numbers

- [Smart Validate - Credit Card Validator](http://www.egrappler.com/jquery-credit-card-validation-plugin-smart-validate/) - It ensures that user has entered a valid credit card number before making an actual transaction

- [Mail Check](https://github.com/Kicksend/mailcheck) - Email domain spelling suggester

- [mailcheck.js](https://github.com/mailcheck/mailcheck) - Reduce user-misspelled email addresses in your forms.

^{[(back to component helpers)](#component-helpers)}

## Contributions

Contribution would be of great help to create a nice list of UI Components

* Fork the project

* Make your feature addition or bug fix

* Send pull request

Want to add your component to this page? Raise an issue in this repo, we will review and add it to the specific category.

**Active Contributors**

[![Logesh Paul](https://avatars3.githubusercontent.com/u/41541?v=3&s=72)](https://github.com/logeshpaul)

[![Jonathan Barratt](https://avatars3.githubusercontent.com/u/500775?v=3&s=72)](https://github.com/reduxionist)

[![Karl Merkli](https://avatars0.githubusercontent.com/u/1131901?v=3&s=72)](https://github.com/Itrulia)

[![Jonathan Garbee](https://avatars1.githubusercontent.com/u/868301?v=3&s=72)](https://github.com/Garbee)

Watch the project to get notified of new additions and updates!