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 and b) Components Helper.
Raise an issue to add your component to this repo.
Components
- Accordion
- Audio
- Checkboxes / Radio Buttons
- Date Picker
- File Upload
- Images
- Maps
- Navigation
- Select Box
- Tool Tip
- Video
- Web Editor (WYSIWYG)
Accordion
| Title | Description |
|---|---|
| Animated Content Tabs with CSS3 | Codrops |
| CSS + HTML only accordion element | Codepen by Alex Bergin |
| CSS Responsive Animated Accordion | Codepen by Chris Wright |
| Bootstrap Accordion | Twitter Bootstrap |
| jQuery UI Accordion | jQuery UI |
| Multiple Nesting | A simple jQuery Accordion with unlimited nesting |
Audio
| Title | Description |
|---|---|
| howler.js | Modern Web Audio Javascript Library |
| SoundJS | Audio library + simple interface |
| Blip | Web Audio API wrapper |
| SoundCite | Inline audio player |
Checkboxes / Radio Buttons
| Title | Description |
|---|---|
| iCheck | Super customized & Flat radio and checkboxes |
| Screw Default Buttons | Replace default button with custom images. |
| iPhone Switch Style | Pretty smooth iPhone like switch |
Date Picker
| Title | Description |
|---|---|
| date for humans | Date for Humans |
| Timepicker | Adding a Timepicker to jQuery UI Datepicker |
| Zebra_Datepicker | A lightweight datepicker jQuery plugin |
File Upload
| Title | Description |
|---|---|
| jQuery File Upload | Multiple file selection, Drag & Drop support, Progress bars, Preview images & Works with most server-side platforms. |
| Uploadify | HTML5 or Flash multiple file upload jQuery plugin script. |
| Dropzone | DropzoneJS is an open source library that provides dragβnβdrop file uploads with image previews. |
Images
| Title | Description |
|---|---|
| layzr.js | A small, fast, modern, and dependency-free library for lazy loading images. |
| ImageLoader.js | Preload Images |
| imagesloaded | ImagesLoaded |
Maps
| Title | Description |
|---|---|
| leaflet.js | An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps |
| jvectormap | Interactive vector world map |
| gmaps.js | Google maps api with less pain and more fun |
| planetaryjs | Awesome interactive globes for the web |
| openlayers3 | Mapping library that supports different projections |
Navigation
| Title | Description |
|---|---|
| Slideout.js | A touch slideout navigation menu for your mobile web apps. |
| Navigation Sidebar with Toggle | Sidebar with toggle for bootstrap |
Select Box
| Title | Description |
|---|---|
| Selectivity | Modular and light-weight selection library for jQuery and Zepto.js |
| Select2 | Features which select API missing |
| Chosen | Modern, Customizable, More user-friendly |
| ddSlick | Allows you to create a custom drop down with images and description. |
| Selectize | hybrid of a textbox and <select> box. |
Tool Tip
| Title | Description |
|---|---|
| Tooltipster | enables you to easily create clean, HTML5 validated tooltips. |
| tipsy | Facebook style - Black Bg tooltips effect based on an anchor tag's title attribute. |
| Hovercard | display related information with the hovered label, link, or any html element of your choice. |
| Toolbar.Js | A jQuery plugin that creates tooltip style toolbars |
| Tipped | Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips. |
Video
| Title | Description |
|---|---|
| Videojs | Open source HTML5 video player |
| MediaElement.js | HTML5 Video & Audio player for all browsers with the same UI. Includes the Flash fallback for IE7+ |
| Plyr | A simple HTML5 media player with custom controls and WebVTT captions |
| Fitvid | Responsive videos |
| BIDEO.JS | Fullscreen background videos |
| Covervid | HTML5 video behave like a background cover image |
| Coverr | Beautiful, free videos for your homepage |
Web Editor (WYSIWYG)
| Title | Description |
|---|---|
| CKEditor | Simple to use and can be modified in any way you want. |
| Redactor | Limitless flexibility and extensibility, simple and super-efficient API and amazing user experience. |
Component Helpers
- Data Manipulation
- Data Visualization
- Events
- HTML5 Placeholder
- Loaders
- Notification
- Presentation
- Time
- Validation
Data Manipulation
- String.js - JavaScript library for the browser or for Node.js that provides extra String methods
- Numeral.js - A javascript library for formatting and manipulating numbers.
- Money.js - JavaScript currency conversion library, done right - with no dependencies. Works seamlessly with data from the Open Exchange Rates API
- 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 - JavaScript implementation of most formula functions supported by Microsoft Excel 2013 and Google Spreadsheets
Data Visualization
- Charts.js - Simple HTML5 Charts using the
<canvas>tag - Textures.js - SVG patterns for Data Visualization
- Drawingboard.js - Create a drawing board on the web using this library
Events
- jQuery Outside Events - clickoutside, dbclickoutside, etc.,
- KeyPress - A robust Javascript library for capturing keyboard input
HTML5 Placeholder:
- jQuery-html5-placeholder-shim - Just include the js, your'e done!
- Simple Placeholder - Lightweight. Required - jQuery.
- Cross Browser Placeholder - Requires jQuery & Modernizer.
Loaders
- Percentage Loader - jQuery plugin for displaying progress in a visual and engaging way
- Hook.js - Pull to refresh. For the web.
- Pace - Automatic page loading progress bar (Youtube loading bar clone)
Notifications
- favico.js - Make use of your favicon with badges, images or videos
- Notificon - Favicon Notifications / Alerts
- Piecon - Pie charts in your favicon!
Presentation
- Reveal.js - An HTML presentation framework
- Impress.js - Presentation which uses the power of css to show different animation effects.
- Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.
- Website Tour - Explain to your users the functioning of your web application in an interactive way
Time
- Moment.js - Javascript date library for parsing, validating, manipulating, and formatting dates.
- Countdown.js - JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances
- Smart Time Ago - jQuery library to update the relative timestamps in your document intelligently.
- timeago - Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps
Validation
- Parsley.js - Validate your forms, frontend, without writting a single line of javascript!
- Validate.js - Lightweight JavaScript form validation library inspired by CodeIgniter.
- Validate Jquery - Form validation with jQuery
- jQuery Credit Card Validator - Detects and validates credit card numbers
- Smart Validate - Credit Card Validator - It ensures that user has entered a valid credit card number before making an actual transaction
- Mail Check - Email domain spelling suggester
- mailcheck.js - Reduce user-misspelled email addresses in your forms.
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
Watch the project to get notified of new additions and updates!