A UI Component in Magento 2 is a modular, XML-driven, Knockout.js-based system that simplifies the creation of complex and dynamic interfaces, especially for admin grids, forms, and frontend interactions.
UI Components help build:
Admin Grids
Admin Forms
Checkout steps
Customer account areas
They are JSON-rendered, data-driven, JS-interactive components.
Layout: vendor_books_book_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<uiComponent name="vendor_books_book_listing"/>
</body>
</page>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Ui/etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">vendor_books_book_listing.vendor_books_book_listing_data_source</item>
</item>
</argument>
<dataSource name="vendor_books_book_listing_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendor\Books\Ui\DataProvider\BookDataProvider</argument>
<argument name="name" xsi:type="string">vendor_books_book_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">book_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
</argument>
</dataSource>
<columns name="book_columns">
<column name="book_id">
<settings>
<filter>textRange</filter>
<label translate="true">ID</label>
</settings>
</column>
<column name="title">
<settings>
<filter>text</filter>
<label translate="true">Title</label>
</settings>
</column>
<column name="author">
<settings>
<filter>text</filter>
<label translate="true">Author</label>
</settings>
</column>
</columns>
</listing>