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

^{(back to components)}

Audio

^{(back to components)}

Checkboxes / Radio Buttons

^{(back to components)}

Date Picker

^{(back to components)}

File Upload

^{(back to components)}

Images

^{(back to components)}

Maps

^{(back to components)}

Navigation

^{(back to components)}

Select Box

^{(back to components)}

Tool Tip

^{(back to components)}

Video

^{(back to components)}

Web Editor (WYSIWYG)

^{(back to components)}

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

^{(back to component helpers)}

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

^{(back to component helpers)}

Events

• jQuery Outside Events - clickoutside, dbclickoutside, etc.,
• KeyPress - A robust Javascript library for capturing keyboard input

^{(back to component helpers)}

HTML5 Placeholder:

• jQuery-html5-placeholder-shim - Just include the js, your'e done!
• Simple Placeholder - Lightweight. Required - jQuery.
• Cross Browser Placeholder - Requires jQuery & Modernizer.

^{(back to component helpers)}

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)

^{(back to component helpers)}

Notifications

• favico.js - Make use of your favicon with badges, images or videos
• Notificon - Favicon Notifications / Alerts
• Piecon - Pie charts in your favicon!

^{(back to component helpers)}

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

^{(back to component helpers)}

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

^{(back to component helpers)}

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.

^{(back to 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

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