{"id":16594349,"url":"https://github.com/logeshpaul/ui-components","last_synced_at":"2026-02-16T05:32:17.833Z","repository":{"id":34475314,"uuid":"38413110","full_name":"logeshpaul/UI-Components","owner":"logeshpaul","description":"Most used UI Components — of web applications. Curated/Most loved components for web development","archived":false,"fork":false,"pushed_at":"2017-08-23T08:13:27.000Z","size":22,"stargazers_count":173,"open_issues_count":0,"forks_count":13,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-02T01:06:53.874Z","etag":null,"topics":["css","css-framework","helpers","html","javascript","javascript-library","jquery-plugin","utility-library"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/logeshpaul.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-02T05:26:13.000Z","updated_at":"2025-03-12T22:53:34.000Z","dependencies_parsed_at":"2022-09-14T09:00:45.782Z","dependency_job_id":null,"html_url":"https://github.com/logeshpaul/UI-Components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/logeshpaul/UI-Components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logeshpaul%2FUI-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logeshpaul%2FUI-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logeshpaul%2FUI-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logeshpaul%2FUI-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logeshpaul","download_url":"https://codeload.github.com/logeshpaul/UI-Components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logeshpaul%2FUI-Components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29500832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T03:57:51.541Z","status":"ssl_error","status_checked_at":"2026-02-16T03:55:59.854Z","response_time":115,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","helpers","html","javascript","javascript-library","jquery-plugin","utility-library"],"created_at":"2024-10-11T23:46:00.584Z","updated_at":"2026-02-16T05:32:17.819Z","avatar_url":"https://github.com/logeshpaul.png","language":null,"readme":"# UI Components\n\nAlmost most of the UI components you use in your web applications as a collection.\n\n#### Why Name UI Components?\n\nThere is a misleading word used in the industry. Let's say you need an image carousel.\n\nYou search in google and find out one which fits your needs \u0026 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.\n\nIt'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.\n\nTo answer a 6 year old: it's a piece of the web layout.\n\n#### What's this repo for?\n\nYou can use this repo as a reference to find different UI Components for your day-to-day web development.\n\nExplore the categories a) [Components](#components) and b) [Components Helper](#component-helpers).\n\nRaise an issue to add your component to this repo.\n\n## Components\n\n- [Accordion](#accordion)\n- [Audio](#audio)\n- [Checkboxes / Radio Buttons](#checkboxes--radio-buttons)\n- [Date Picker](#date-picker)\n- [File Upload](#file-upload)\n- [Images](#images)\n- [Maps](#maps)\n- [Navigation](#navigation)\n- [Select Box](#select-box)\n- [Tool Tip](#tool-tip)\n- [Video](#video)\n- [Web Editor (WYSIWYG)](#web-editor-wysiwyg)\n\n\n#### Accordion\n\n| Title  | Description |\n| ------ | ----------- |\n| [Animated Content Tabs with CSS3](http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/) | Codrops |\n| [CSS + HTML only accordion element](http://codepen.io/abergin/pen/ihlDf) | Codepen by Alex Bergin |\n| [CSS Responsive Animated Accordion](http://codepen.io/chriswrightdesign/pen/cmanI) | Codepen by Chris Wright |\n| [Bootstrap Accordion](http://getbootstrap.com/javascript/#collapse-example-accordion) | Twitter Bootstrap |\n| [jQuery UI Accordion](https://jqueryui.com/accordion/) | jQuery UI |\n| [Multiple Nesting](https://codepen.io/brenden/pen/Kwbpyj) | A simple jQuery Accordion with unlimited nesting |\n\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Audio\n\n| Title  | Description |\n| ------ | ----------- |\n| [howler.js](http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library) | Modern Web Audio Javascript Library |\n| [SoundJS](http://createjs.com/SoundJS) | Audio library + simple interface |\n| [Blip](http://jshanley.github.io/blip/) | Web Audio API wrapper |\n| [SoundCite](http://soundcite.knightlab.com/) | Inline audio player |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Checkboxes / Radio Buttons\n\n| Title  | Description |\n| ------ | ----------- |\n| [iCheck](http://damirfoy.com/iCheck/) | Super customized \u0026 Flat radio and checkboxes|\n| [Screw Default Buttons](http://www.screwdefaultbuttons.com/) | Replace default button with custom images. |\n| [iPhone Switch Style](http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html) | Pretty smooth iPhone like switch |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Date Picker\n\n| Title  | Description |\n| ------ | ----------- |\n| [date for humans](http://date.js.org/) | Date for Humans |\n| [Timepicker](http://trentrichardson.com/examples/timepicker/) | Adding a Timepicker to jQuery UI Datepicker |\n| [Zebra_Datepicker](http://stefangabos.ro/jquery/zebra-datepicker/) | A lightweight datepicker jQuery plugin |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  File Upload\n\n| Title  | Description |\n| ------ | ----------- |\n| [jQuery File Upload](http://blueimp.github.com/jQuery-File-Upload/) | Multiple file selection, Drag \u0026 Drop support, Progress bars, Preview images \u0026 Works with most server-side platforms. |\n| [Uploadify](http://www.uploadify.com/) | HTML5 or Flash multiple file upload jQuery plugin script. |\n| [Dropzone](http://www.dropzonejs.com/) | DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Images\n\n| Title  | Description |\n| ------ | ----------- |\n| [layzr.js](https://github.com/callmecavs/layzr.js) | A small, fast, modern, and dependency-free library for lazy loading images. |\n| [ImageLoader.js](http://nick-jonas.github.com/imageloader/) | Preload Images |\n| [imagesloaded](https://github.com/desandro/imagesloaded) | ImagesLoaded |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Maps\n\n| Title  | Description |\n| ------ | ----------- |\n| [leaflet.js](http://leafletjs.com/) | An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps |\n| [jvectormap](http://jvectormap.com/) | Interactive vector world map |\n| [gmaps.js](http://hpneo.github.com/gmaps/) | Google maps api with less pain and more fun |\n| [planetaryjs](http://planetaryjs.com/) | Awesome interactive globes for the web |\n| [openlayers3](http://openlayers.org/) | Mapping library that supports different projections |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Navigation\n\n| Title  | Description |\n| ------ | ----------- |\n| [Slideout.js](https://mango.github.io/slideout/) | A touch slideout navigation menu for your mobile web apps. |\n| [Navigation Sidebar with Toggle](http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle) | Sidebar with toggle for bootstrap |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Select Box\n\n| Title  | Description |\n| ------ | ----------- |\n| [Selectivity](https://arendjr.github.io/selectivity/) | Modular and light-weight selection library for jQuery and Zepto.js |\n| [Select2](https://select2.github.io/) | Features which select API missing |\n| [Chosen](http://harvesthq.github.com/chosen/) | Modern, Customizable, More user-friendly |\n| [ddSlick](http://designwithpc.com/Plugins/ddSlick) | Allows you to create a custom drop down with images and description. |\n| [Selectize](http://brianreavis.github.io/selectize.js/) | hybrid of a textbox and `\u003cselect\u003e` box. |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Tool Tip\n\n| Title  | Description |\n| ------ | ----------- |\n| [Tooltipster](http://calebjacob.com/tooltipster/) | enables you to easily create clean, HTML5 validated tooltips. |\n| [tipsy](http://onehackoranother.com/projects/jquery/tipsy/) | Facebook style - Black Bg tooltips effect based on an anchor tag's title attribute. |\n| [Hovercard](http://designwithpc.com/Plugins/Hovercard) | display related information with the hovered label, link, or any html element of your choice. |\n| [Toolbar.Js](http://paulkinzett.github.com/toolbar/) | A jQuery plugin that creates tooltip style toolbars |\n| [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. |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Video\n\n| Title  | Description |\n| ------ | ----------- |\n| [Videojs](http://www.videojs.com/) | Open source HTML5 video player |\n| [MediaElement.js](http://mediaelementjs.com/) | HTML5 Video \u0026 Audio player for all browsers with the same UI. Includes the Flash fallback for IE7+ |\n| [Plyr](http://plyr.io/) | A simple HTML5 media player with custom controls and WebVTT captions |\n| [Fitvid](http://fitvidsjs.com/) | Responsive videos |\n| [BIDEO.JS](https://rishabhp.github.io/bideo.js/) | Fullscreen background videos |\n| [Covervid](http://stefanerickson.github.io/covervid/) | HTML5 video behave like a background cover image |\n| [Coverr](http://www.coverr.co/) | Beautiful, free videos for your homepage |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n####  Web Editor (WYSIWYG)\n\n| Title  | Description |\n| ------ | ----------- |\n| [CKEditor](http://ckeditor.com/) | Simple to use and can be modified in any way you want. |\n| [Redactor](http://imperavi.com/redactor/) | Limitless flexibility and extensibility, simple and super-efficient API and amazing user experience. |\n\n\u003csup\u003e[(back to components)](#components)\u003c/sup\u003e\n\n\n## Component Helpers\n\n- [Data Manipulation](#data-manipulation)\n- [Data Visualization](#data-visualization)\n- [Events](#events)\n- [HTML5 Placeholder](#html5-placeholder)\n- [Loaders](#loaders)\n- [Notification](#notifications)\n- [Presentation](#presentation)\n- [Time](#time)\n- [Validation](#validation)\n\n\n\n\n\n#### Data Manipulation\n\n- [String.js](http://stringjs.com/) - JavaScript library for the browser or for Node.js that provides extra String methods\n- [Numeral.js](http://numeraljs.com/) - A javascript library for formatting and manipulating numbers.\n- [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/)\n- [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.\n- [Formula.js](http://stoic.com/formula/) - JavaScript implementation of most formula functions supported by Microsoft Excel 2013 and Google Spreadsheets\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Data Visualization\n\n- [Charts.js](https://github.com/nnnick/Chart.js) - Simple HTML5 Charts using the `\u003ccanvas\u003e` tag\n- [Textures.js](http://riccardoscalco.github.io/textures/) - SVG patterns for Data Visualization\n- [Drawingboard.js](http://leimi.github.io/drawingboard.js/) - Create a drawing board on the web using this library\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Events\n\n- [jQuery Outside Events](http://benalman.com/projects/jquery-outside-events-plugin/) - clickoutside, dbclickoutside, etc.,\n- [KeyPress](http://dmauro.github.io/Keypress/) - A robust Javascript library for capturing keyboard input\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### HTML5 Placeholder:\n\n- [jQuery-html5-placeholder-shim](https://github.com/jcampbell1/jquery-html5-placeholder-shim) - Just include the js, your'e done!\n- [Simple Placeholder](https://github.com/marcgg/Simple-Placeholder) - Lightweight. Required - jQuery.\n- [Cross Browser Placeholder](http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text) - Requires jQuery \u0026 Modernizer.\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Loaders\n\n- [Percentage Loader](http://widgets.better2web.com/loader/) - jQuery plugin for displaying progress in a visual and engaging way\n- [Hook.js](http://usehook.com/) - Pull to refresh. For the web.\n- [Pace](http://github.hubspot.com/pace/docs/welcome/) - Automatic page loading progress bar (Youtube loading bar clone)\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Notifications\n\n- [favico.js](http://lab.ejci.net/favico.js/) - Make use of your favicon with badges, images or videos\n- [Notificon](https://github.com/makeable/Notificon) - Favicon Notifications / Alerts\n- [Piecon](http://lipka.github.com/piecon/) - Pie charts in your favicon!\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Presentation\n\n- [Reveal.js](http://lab.hakim.se/reveal-js/#/) - An HTML presentation framework\n- [Impress.js](http://bartaz.github.io/impress.js/#/bored) - Presentation which uses the power of css to show different animation effects.\n- [Intro.js](http://usablica.github.io/intro.js/) - Better introductions for websites and features with a step-by-step guide for your projects.\n- [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\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Time\n\n- [Moment.js](http://momentjs.com/) - Javascript date library for parsing, validating, manipulating, and formatting dates.\n- [Countdown.js](http://countdownjs.org/) - JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances\n- [Smart Time Ago](http://pragmaticly.github.com/smart-time-ago/) - jQuery library to update the relative timestamps in your document intelligently.\n- [timeago](http://timeago.yarp.com/) - Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n#### Validation\n\n- [Parsley.js](http://parsleyjs.org/) - Validate your forms, frontend, without writting a single line of javascript!\n- [Validate.js](http://rickharrison.github.com/validate.js/) - Lightweight JavaScript form validation library inspired by CodeIgniter.\n- [Validate Jquery](http://jqueryvalidation.org/) - Form validation with jQuery\n- [jQuery Credit Card Validator](http://paweldecowski.github.com/jQuery-CreditCardValidator/) - Detects and validates credit card numbers\n- [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\n- [Mail Check](https://github.com/Kicksend/mailcheck) - Email domain spelling suggester\n- [mailcheck.js](https://github.com/mailcheck/mailcheck) - Reduce user-misspelled email addresses in your forms.\n\n\u003csup\u003e[(back to component helpers)](#component-helpers)\u003c/sup\u003e\n\n\n## Contributions\n\nContribution would be of great help to create a nice list of UI Components\n\n* Fork the project\n* Make your feature addition or bug fix\n* Send pull request\n\nWant to add your component to this page? Raise an issue in this repo, we will review and add it to the specific category.\n\n**Active Contributors**\n\n[![Logesh Paul](https://avatars3.githubusercontent.com/u/41541?v=3\u0026s=72)](https://github.com/logeshpaul)\n[![Jonathan Barratt](https://avatars3.githubusercontent.com/u/500775?v=3\u0026s=72)](https://github.com/reduxionist)\n[![Karl Merkli](https://avatars0.githubusercontent.com/u/1131901?v=3\u0026s=72)](https://github.com/Itrulia)\n[![Jonathan Garbee](https://avatars1.githubusercontent.com/u/868301?v=3\u0026s=72)](https://github.com/Garbee)\n\nWatch the project to get notified of new additions and updates!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogeshpaul%2Fui-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogeshpaul%2Fui-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogeshpaul%2Fui-components/lists"}