Adding jQuery UI Widget to drupal 8

Example :

Step 1 : Add libraries. Example: (With theme / or module : mytheme)

On : mytheme.libraries.yml file

mylibrary:

  version: 1.x

  js:

    js/script.js: {}

  dependencies:

    - core/drupal

    - core/jquery

    - core/jquery.ui.tabs

    

Step 2 : Attache this mylibrary

Methode 1. On a theme: Add to mytheme.info.yml file

libraries:

  - mytheme/mylibrary

 

Methode 2. On a custom page or block

$output['#attached']['library'][] = 'mytheme/mylibrary';

Step 3 : Create js/script.js file (Here an example of Tabs)

(function ($, Drupal, window, document) {

  Drupal.behaviors.basic = {

    attach: function (context, settings) {

      $(window).load(function () {

        $("#tabs").tabs();

      });

    }

  };

}(jQuery, Drupal, this, this.document));

Step 4 : Insert your jQuery UI codes to the appropriated page.