docs(device_browser): added user docs

docs/user/widgets/device_browser/device_browser.md

@@ -0,0 +1,36 @@
+(user.widgets.device_browser)=
+
+# Device Browser
+
+````{tab} Overview
+
+The `Device Browser` widget provides a user-friendly interface for browsing through all available devices in the current BEC session. As it supports drag functionality, users can easily drag and drop device into other widgets or applications. 
+
+```{note}
+The `Device Browser` widget is currently under development. Other widgets may not support drag and drop functionality yet.
+```
+
+## Key Features:
+- **Device Search**: Allows users to search for devices using regular expressions.
+- **Drag and Drop**: Supports drag and drop functionality for easy transfer of devices to other widgets or applications.
+
+```{figure} ./device_browser.png
+```
+````
+
+````{tab} Examples
+
+In this example, we demonstrate how to add a `DeviceBrowser` widget to a `BECDockArea` to visualize the progress of a task.
+
+```python
+# Add a new dock with a DeviceBrowser widget
+browser = gui.add_dock().add_widget("DeviceBrowser")
+```
+
+````
+
+````{tab} API
+```{eval-rst} 
+.. include:: /api_reference/_autosummary/bec_widgets.cli.client.DeviceBrowser.rst
+```
+````

docs/user/widgets/widgets.md

@@ -78,6 +78,14 @@ Control and monitor devices/scan in the BEC environment.
 Launch scans.
 ```
 
+```{grid-item-card}  Device Browser
+:link: user.widgets.device_browser
+:link-type: ref
+:img-top: /assets/widget_screenshots/device_browser.png
+
+Find and drag devices.
+```
+
 ```{grid-item-card}  Positioner Box
 :link: user.widgets.positioner_box
 :link-type: ref
@@ -200,6 +208,7 @@ progress_bar/ring_progress_bar.md
 bec_status_box/bec_status_box.md
 queue/queue.md
 buttons/buttons.md
+device_browser/device_browser.md
 positioner_box/positioner_box.md
 text_box/text_box.md
 website/website.md