> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/10.0.x/developers/understanding-varbase/core-components/varbase-components.md).

# 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.                                                                                                |

{% content-ref url="/pages/zLMC1Vv9CP2b46Zef879" %}
[Integration of Varbase with Storybook](/10.0.x/developers/theme-development-with-varbase/integration-of-varbase-with-storybook.md)
{% endcontent-ref %}

{% content-ref url="/pages/FXLjduV6ue2JynXyr9b3" %}
[Customize a Varbase Single Directory Components (SDC) In a Custom Theme](/10.0.x/developers/theme-development-with-varbase/customize-a-varbase-single-directory-components-sdc-in-a-custom-theme.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.