UI Components

• Notification, Snackbar and Toast

  • **VanillaToasts**
  • **Notify.js**
  • **Toastr** - blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. | JavaScript |
  • **Vue-toast-notification**
  • **Notie**
  • **Sweetalert2** - ARIA) replacement for JavaScript's popup boxes. Zero dependencies. | JavaScript |
  • **React-Toastify** - Toastify allows you to add notifications to your app with ease. | React |
  • **React Hot Toast**
  • **Notyf** - free. | JavaScript |

• Accordion

  • **Accordion**

• Buttons

  • **Vue Promise Btn**
  • **Cloud Sync Button** - bar with cloud synchronization animation in vanilla JavaScript, Vue.js, and Web component formats. | Vue.js |
  • **Add to Calendar**
  • **Animating-Buttons**

• Carousels

  • **Swiper** - source JavaScript slider library that enables you to add sliders to your web pages. | JavaScript |
  • **Slick** - enabled carousels on web pages. | JavaScript |
  • **No UI Slider** - accessible JavaScript range slider with multi-touch and keyboard support. | JavaScript |
  • **Glide.js** - free and lightweight JavaScript slider library for creating smooth, fast, and responsive sliders. | JavaScript |
  • **Splide Javascript Slider** - source, flexible, and accessible carousel library written in TypeScript. | TypeScript |
  • **Flicking**
  • **Tiny Slider** - Slide is an open-source vanilla JavaScript library that lets you build beautiful and responsive carousel sliders. | JavaScript |
  • **Simple Slider** - source, lightweight, and highly testable JavaScript Carousel slider library. | JavaScript |
  • **Vue 3 Carousel** - source Vue 3 component library that lets you create customizable carousel/slides for your Vue-based projects. | Vue.js |
  • **FullpageJS**
  • **Keen Slider** - source library that can easily create sliders and carousels that are mobile-friendly. | React.js |
  • **React Lightbox**
  • **React Responsive Carousel**
  • **React-ID-Swiper**
  • **React Slick** - Slick is a carousel component for React applications for creating responsive and customizable carousels or sliders. | React.js |
  • **React Swipeable** - source project that offers a swipeable component for React applications. | React.js |

• Badges / Chips

  • **KendoReact Chip**
  • **KendoReact Chip**

• Dropdown

  • **vanillaSelectBox** - select menu with 1 or 2 levels. | JavaScript |
  • **DownShift** - ARIA compliant React autocomplete, combobox or select dropdown components. | React |
  • **Select2**
  • **jQuery-MultiSelect** - to-use list with checkboxes. | JavaScript |
  • **Slim Select**

• Modals

  • **Vex**
  • **AlertifyJS**
  • **Tingle.js** - to-use. | JavaScript |
  • **Rmodal**
  • **Vue-js-modal**
  • **Micromodal** - enabled modal library that you can easily add to your project with minimum configuration. | JavaScript |

• Navbar

  • **Pushbar.js** - free. You can use it as sidebar menus or option drawers. | JavaScript |
  • **SuperSlide.js**
  • **Menuspy**
  • **Slideout.js**
  • **JavaScript-Spatial-Navigation** - based implementation of Spatial Navigation. | JavaScript |
  • **SIDR**
  • **Responsive-nav.js**
  • **PriorityNavigation.js**

• Charts and Graphs

  • **D3.js**
  • **Chart.js**
  • **Plotly.js** - level, declarative charting library that supports interactive, publication-quality graphs online. | JavaScript |
  • **Highcharts**
  • **C3.js** - based reusable chart library that enables deeper integration of charts into web applications. | JavaScript |
  • **Chartist.js**
  • **Apexcharts.js** - to-use samples. | JavaScript |
  • **BillBoard.js**
  • **E-Charts** - source and widely used library for its comprehensive range of chart types and extensive customization options. | JavaScript |
  • **Frappe Charts**
  • **amCharts**
  • **CanvasJS**
  • **Recharts**
  • **Victory**
  • **React-vis**
  • **react-chartjs-2**
  • **Nivo**
  • **vue-chartjs**

• Formatting

  • **Cleave.js**
  • **Inputmask**
  • **AutoNumeric.js** - as-you-type formatting for international numbers and currencies. | JavaScript |
  • **Format.Js**
  • **Numeral.js**

• Pagination

  • **Pagination.js**
  • **React Paginate** - based projects. | React.js |
  • **Vue.js Paginate**
  • **Laravel Vue Pagination** - of-the-box components for Bootstrap 4/5 and Tailwind CSS. | Vue.js |
  • **Ngx-Pagination**
  • **rc-pagination** - source React pagination component for your React web apps. | React.js |

• Progress/ Spinners/ Loaders

  • **ProgressBar.js** - in shapes or create your own paths. Customize the animations as you wish. | JavaScript |
  • **NProgress**
  • **Pace** - ready state, and elements on your page to show a progress indicator. | JavaScript and CSS |
  • **Spin.js**
  • **React-Loading**
  • **Epic-spinners** - Spinners is an open-source, easy-to-use CSS spinner collection with Vue JS 3 integration. | Vue.js |
  • **Vue-Spinner**

• Rating

  • **star-rating.js** - dependency library that transforms a select with numerical-range values (i.e. 1-5) into a dynamic star rating element. | JavaScript & HTML |
  • **react-stars**
  • **RateYo!**
  • **vue-star-rating**
  • **Starry** - rating capability, initial rating value, read-only mode, tooltips for stars, and custom icons. | JavaScript |
  • **Raty**

• Breadcrumbs

  • **Laravel-breadcrumbs** - style way to create breadcrumbs. | Laravel |

• Timeline

  • **Timesheet.js**
  • **Labella.js**
  • **React-Chrono** - alternating. | JavaScript (React) |
  • **Vertical Timeline** - based timeline library with support for bounce animation. | JavaScript, CSS3 |
  • **Vis Timeline**
  • **TimelineJS3**
  • **React Calendar Timeline**
  • **React Vertical Timeline**
  • **TimelineJS**
  • **Chronoline.js**
  • **Angular Timeline** - driven vertical timeline library for Angular. | JavaScript (Angular) |

• Drag and Drop

  • **React-Beautiful-DnD** - and-drop library for lists, built on React. Supports vertical, horizontal, and multi-drag features. | JavaScript (React) |
  • **Sortable** - source JavaScript library for reorderable drag-and-drop lists. Supports multi-drag and swap thresholds. | JavaScript |
  • **Dragula**
  • **React-DnD** - and-drop interfaces, keeping components decoupled. | JavaScript (React) |
  • **vue.draggable.next** - based drag and drop component, compatible with Vue 3 and based on Sortable.js. | JavaScript (Vue) |
  • **DropZone** - and-drop file upload interfaces, with file preview and upload progress features. | JavaScript |
  • **React-Grid-Layout** - packing and responsive breakpoints. | JavaScript (React) |
  • **Draggable** - source library offering a custom drag-and-drop experience by abstracting native browser events. | JavaScript |
  • **Interact.JS** - touch gestures for drag and drop, with a simple, flexible API. | JavaScript |
  • **Ng-Sortable** - based drag-and-drop library supporting sortable and draggable features on touch devices. | JavaScript (Angular) |
  • **MoveAble** - and-drop, like resizing, wrapping, pinching, and grouping. | JavaScript |
  • **DragSelect** - and-drop library with no dependencies, supporting module exports and ES6 modules. | JavaScript |
  • **DFlex** - and-drop interfaces in modern apps, built on Vanilla JavaScript with a transformation mechanism. | JavaScript |

• Form Validation

  • **Just-validate** - based library with no dependencies. | TypeScript |
  • **Parsley.js** - source library offering robust form validation, implementable on both backend and frontend. | JavaScript |
  • **Jquery Validation** - side validation plugin with extensive customization options. | JavaScript |
  • **JqBootstrapValidation** - source framework for Bootstrap forms, offering a variety of validators. | JavaScript |
  • **Jquery Creditcardvalidator**
  • **Hyperform**
  • **v8n**
  • **revalidate**
  • **Pristine** - library for JavaScript form validation, no dependencies, and supports built-in validators. | JavaScript |
  • **bouncer.js** - submit validation. | JavaScript |
  • **React Hook Form** - source form validation library for form state management built with performance, UX, and DX in mind. | JavaScript (React) |
  • **React Final Form**

• Date Pickers

  • **Hotel Datepicker** - based projects. Supports all modern browsers. | JavaScript |
  • **Date Range Picker**
  • **Pickadate.js** - friendly, responsive, and lightweight jQuery date & time input picker. | JavaScript |
  • **Airbnb react dates** - source React datepickers on the market with a very clear and intuitive design. | JavaScript (React) |
  • **React-datepicker**
  • **React-DayPicker**
  • **React-widgets**
  • **V-calendar**
  • **Vuejs-DatePicker**
  • **Flatpickr**
  • **Tempus Dominus**
  • **React Infinite Calendar** - source date picker with Infinite scrolling, localization, range selection, themes, keyboard support, and more. | JavaScript (React) |
  • **Bootstrap-datepicker** - source Bootstrap Date picker with advanced features like keyboard navigation, autoclose, today highlight, google, and more. | Bootstrap |
  • **Pikaday**
  • **Day.js**

• 3D and Games

  • **Three.js** - based rendering, built-in geometries, shaders, camera control, and more. | JavaScript |
  • **React-three-fiber**
  • **Babylon.js**
  • **Aframe** - component architecture, high performance, and cross-platform compatibility. | JavaScript |
  • **Cesium**
  • **Zdog** - 3D engine with a straight-forward API and designer-friendly approach. | JavaScript |
  • **Vanta.js** - source library for animated 3D backgrounds, compatible with various frameworks like React, Angular, and Vue. Features easy integration and interactive effects. | JavaScript |
  • **vanilla-tilt.js**
  • **PlayCanvas** - time collaboration. | JavaScript |
  • **Whitestorm.js**
  • **Physijs**
  • **Oimo.js**
  • **TWEEN.js**
  • **React 3D Model Viewer**
  • **Regl** - performance, functional graphics applications and games. It provides a minimalistic API for efficient rendering. | JavaScript |
  • **Matter.js**
  • **Plank.js**
  • **Melon.js** - based graphics, WebGL rendering, and audio support. | JavaScript |
  • **PixiJS** - to-use API, support for texture atlases, and full scene graph. | JavaScript |
  • **Stage.js** - like tree data model and rendering cycle management. | JavaScript |
  • **Kaboom.js**
  • **Cannon.js**

• Calendar

  • **FullCalendar** - and-drop events, resource timelines, time grids, and multiple themes. | JavaScript |
  • **TUI Calendar** - source feature-rich calendar library available in Plain JavaScript, React, and Vue. Supports various view types, drag-and-drop scheduling, and customization options. | JavaScript |
  • **DayPilot Lite** - source JavaScript calendar and Scheduler library. Suitable for building calendars, scheduling, project management, and resource booking applications. | JavaScript |
  • **CLNDR**
  • **Scheduler: JavaScript online calendar** - and-drop event management. | JavaScript |
  • **Vanilla-calendar.js**
  • **MobiScroll- Modern Javascript event calendar**
  • **DHTMLX-JavaScript Scheduler Event Calendar** - like event calendars. Offers a timeline view, customizable content cells, and multi-section events. | JavaScript |
  • **Color Calendar**
  • **Calendar.js** - and-drop event calendar built on JavaScript. It is compatible across all major browsers and offers full-color customization for events. | JavaScript |

• Search

  • **TypeHead/BloodHound**
  • **Fuse.Js** - source lightweight fuzzy-search built on JavaScript with zero dependencies. Supports logical query operators and has no DOM dependencies, making it suitable for backend use as well. | JavaScript |
  • **List.JS** - browser compatible. | JavaScript |
  • **FlexSearch** - text JavaScript fuzzy search library with zero dependencies. Offers features like multi-field search, phonetic transformations, partial matching, and uses a scoring algorithm called "contextual index." | JavaScript |
  • **Match Sorter**
  • **uFuzzy** - to-medium phrases, suitable for list filtering and auto-complete/suggest features. | JavaScript |
  • **Fuzzyset.JS** - text search to determine misspellings and approximate string matching. | JavaScript |
  • **Horsey**
  • **FZF for JavaScript** - based Fuzzy Search Library FZF, built using Golang, to JavaScript. Offers features like HighlightChars, Case sensitivity, and non-string list support. | JavaScript |
  • **Bripkens** - term matches and character sequence highlighting before and after the text. | JavaScript |
  • **FuzzBunny** - source, fast, minified, and memory-efficient fuzzy string searching/matching/highlighting library. Works well in browser environments and Node.js, with a straightforward API for easy integration. | JavaScript |

• Editors

  • **Quill**
  • **CodeMirror**
  • **Monaco Editor** - based code editors. | JavaScript |
  • **Ace (Ajax.org Cloud9 Editor)**
  • **Slate** - agnostic library for building rich text editors. Slate provides a flexible core that can be extended to build a variety of editors. | JavaScript |
  • **Editor.js** - styled editor with clean JSON output. Editor.js is designed to be easy to extend and customize, making it ideal for creating structured, content-centric editors. | JavaScript |
  • **Draft.js** - based framework for building rich text editors. It offers an immutable model for content state and a declarative API to manage rich text input. | JavaScript |
  • **Trix** - friendly interface for content creation. | JavaScript |
  • **TOAST UI Editor**
  • **Medium Editor**
  • **TinyMCE** - known rich text editor with a wide array of plugins. TinyMCE is highly configurable and can be integrated with major frameworks like React, Vue, and Angular. | JavaScript |
  • **Summernote**
  • **Jsoneditor** - friendly editor for JSON, offering a tree view to easily navigate, edit, and analyze JSON data. | JavaScript |
  • **CKEditor 5**
  • **SimpleMDE** - free interface for Markdown editing. | JavaScript |
  • **Bootstrap WYSIWYG** - compatible WYSIWYG rich text editor, designed for simplicity and integration with the Bootstrap framework. | JavaScript |
  • **wysihtml5** - source rich text editor based on HTML5, offering advanced features and a flexible approach to content editing. | JavaScript |
  • **ProseMirror**

• Table

  • **Blueprint** - based open-source UI tool kit for the web. It can easily handle complex data-dense desktop applications and build an easy interface | JavaScript (React) |
  • **DataTables**
  • **TanStack Table**
  • **Handsontable**
  • **Bootstrap Table**
  • **List.js**
  • **AG-Grid**
  • **Clusterize.js**
  • **Material Table** - ui's table with additional features. | JavaScript (React) |