docs(user): widget gallery with documentation added

docs/user/widgets/text_box/text_box.md

@@ -0,0 +1,74 @@
+(user.widgets.text_box)=
+
+# Text Box Widget
+
+````{tab} Overview
+
+The [`Text Box Widget`](/api_reference/_autosummary/bec_widgets.cli.client.TextBox) is a versatile widget that allows users to display text within the BEC GUI. It supports both plain text and HTML, making it useful for displaying simple messages or more complex formatted content. This widget is particularly suited for integrating textual content directly into the user interface, whether as a standalone message box or as part of a larger application interface.
+
+## Key Features:
+- **Text Display**: Display either plain text or HTML content, with automatic detection of the format.
+- **Customizable Appearance**: Set the background and font colors to match the design of your application.
+- **Font Size Adjustment**: Customize the font size of the displayed text for better readability.
+
+````
+
+````{tab} Examples - CLI
+
+The `TextBox` widget can be integrated within a [`BECDockArea`](user.widgets.bec_dock_area) or used as an individual component in your application through `QtDesigner`. The following examples demonstrate how to create and customize the `TextBox` widget in various scenarios.
+
+## Example 1 - Adding Text Box Widget to BECDockArea
+
+In this example, we demonstrate how to add a `TextBox` widget to a `BECDockArea` and set the text to be displayed.
+
+```python
+# Add a new dock with a TextBox widget
+text_box = gui.add_dock().add_widget("TextBox")
+
+# Set the text to display
+text_box.set_text("Hello, World!")
+```
+
+## Example 2 - Displaying HTML Content
+
+The `TextBox` widget can automatically detect and render HTML content. This example shows how to display formatted HTML text.
+
+```python
+# Set the text to display as HTML
+text_box.set_text("<h1>Welcome to BEC Widgets</h1><p>This is an example of displaying <strong>HTML</strong> text.</p>")
+```
+
+## Example 3 - Customizing Appearance
+
+The `TextBox` widget allows you to customize the background and font colors to fit your application's design. Below is an example of how to set these properties.
+
+```python
+# Set the background color to white and the font color to black
+text_box.set_color(background_color="#FFF", font_color="#000")
+```
+
+## Example 4 - Adjusting Font Size
+
+To improve readability or fit more text within the widget, you can adjust the font size.
+
+```python
+# Set the font size to 14 pixels
+text_box.set_font_size(14)
+```
+
+````
+
+````{tab} API
+```{eval-rst} 
+.. include:: /api_reference/_autosummary/bec_widgets.cli.client.TextBox.rst
+```
+````
+
+
+
+
+
+
+
+
+