# Varbase Components

Utilizing Single Directory Components (SDC) and UI Patterns module. Working in hand with Vartheme BS5 the Varbase Theme (Bootstrap 5 - SASS). The new generation of theming based on Bootstrap 5, SDC, and UI Patterns.

## Varbase Components Module

{% hint style="info" %}
Varbase components are bundled through the **Varbase Components** module.\
GitHub: <https://github.com/Vardot/varbase_components>\
Drupal.org: <https://www.drupal.org/project/varbase_components>

After building a project using the `varbase-project` template, you can see the code of the **Varbase Components** module in:
{% endhint %}

```
project_directory
|-- docroot
    |-- modules
        |-- contrib
            |-- varbase_components
```

Brings in the following core and contributed modules to your site:

| Module                                                                                      | Purpose                                                                                                                         |
| ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>Single Directory Components</strong><br><em>(in Drupal core)</em></p>            | Allows discovery and rendering of self-contained UI components.                                                                 |
| [**Component Libraries: Components**](https://www.drupal.org/project/cl_components)         | Allows to declare, discover, and render self-contained components.                                                              |
| [**Component Libraries: Blocks**](https://www.drupal.org/project/cl_block)                  | Allows turning CL Components into configurable blocks.                                                                          |
| [**Component Libraries: Selector Field**](https://www.drupal.org/project/cl_selector_field) | Allows to create a field to select components.                                                                                  |
| [**Component Libraries: Server**](https://www.drupal.org/project/cl_server)                 | Providers server rendering for CL Components.                                                                                   |
| [**Component Libraries: Devel**](https://www.drupal.org/project/cl_devel)                   | Provides development aids to component developers.                                                                              |
| [**Component Libraries: Generator**](https://www.drupal.org/project/cl_generator)           | Drush integration to generate CL Components interactively.                                                                      |
| [**Component Libraries: Editorial**](https://www.drupal.org/project/cl_editorial)           | Provides shared features to aid low-code approaches using Single Directory Components.                                          |
| [**Single Directory Components: Tagging**](https://www.drupal.org/project/cl_editorial)     | Allows tagging components so other modules can understand components better.                                                    |
| [**Single Directory Components: Display**](https://www.drupal.org/project/sdc_display)      | Integrates fields and view modes with single directory components.                                                              |
| [**UI Patterns**](https://www.drupal.org/project/ui_patterns)                               | Define and expose self-contained UI patterns as Drupal plugins and use them seamlessly in Drupal development and site-building. |
| [**UI Patterns Layouts**](https://www.drupal.org/project/ui_patterns)                       | Use patterns as layouts via the Layout Discovery module.                                                                        |
| [**UI Patterns Library**](https://www.drupal.org/project/ui_patterns)                       | Exposed patterns in you modules and themes and display them in a pattern library page.                                          |
| [**UI Patterns Settings**](https://www.drupal.org/project/ui_patterns_settings)             | Configure patterns with settings.                                                                                               |
| [**UI Patterns Views**](https://www.drupal.org/project/ui_patterns)                         | Use patterns as Views templates.                                                                                                |
| [**UI Icons**](https://www.drupal.org/project/ui_icons)                                     | Core Icons main form element for Icon autocomplete.                                                                             |
| [**UI Icons for UI Patterns**](https://www.drupal.org/project/ui_icons)                     | Icons integration with UI Patterns                                                                                              |
| [**UI Icons Fields**](https://www.drupal.org/project/ui_icons)                              | Field type Icon and field type Link integration.                                                                                |
| [**UI Icons Picker**](https://www.drupal.org/project/ui_icons)                              | Provide a fancy icon picker for UI Icons selector.                                                                              |
| [**UI Icons Library**](https://www.drupal.org/project/ui_icons)                             | Overview of all icons available on your site.                                                                                   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.varbase.vardot.com/10.1.x/developers/understanding-varbase/core-components/varbase-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.