Skip to content

Most used UI Components — of web applications. Curated/Most loved components for web development

License

Notifications You must be signed in to change notification settings

logeshpaul/UI-Components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 

Repository files navigation

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

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

(back to components)

Audio

Title Description
howler.js Modern Web Audio Javascript Library
SoundJS Audio library + simple interface
Blip Web Audio API wrapper
SoundCite Inline audio player

(back to components)

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

(back to components)

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

(back to components)

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.

(back to components)

Images

Title Description
layzr.js A small, fast, modern, and dependency-free library for lazy loading images.
ImageLoader.js Preload Images
imagesloaded ImagesLoaded

(back to components)

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

(back to components)

Navigation

Title Description
Slideout.js A touch slideout navigation menu for your mobile web apps.
Navigation Sidebar with Toggle Sidebar with toggle for bootstrap

(back to components)

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.

(back to components)

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.

(back to components)

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

(back to components)

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.

(back to components)

Component Helpers

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

(back to component helpers)

HTML5 Placeholder:

(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

(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

Logesh Paul Jonathan Barratt Karl Merkli Jonathan Garbee

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

About

Most used UI Components — of web applications. Curated/Most loved components for web development

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published