# Getting Started

Components are pre-built, easily styled to assist users in the creation and implementation of a shopping journey from product discovery to order placement without the need to implement functionality against the user interactions.  

The Modules were designed to handle the most critical touch-points of the optimized shopping journey specifically for beverage alcohol eCommerce. By simplifying these interactions while also providing customization options, these solutions can cover a variety of use cases and are essentially ready out of the box. 

The SDK was built using **Web Components** but also provided as **React** components. You can install the package through NPM.

```bash
# for Preact
npm install @liquidcloud/modules-react
# or
yarn add @liquidcloud/modules-react

# for React
npm install @liquidcloud/modules-react
# or
yarn add @liquidcloud/modules-react
```

To further customize the UI components, users can access and edit our theme providers to ensure the component looks, feels, and functions like it is native.

**Liquid Modules (REACT)**

* [<mark style="color:blue;">**\<LiquidBreadcrumb/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/breadcrumbs)
* **\<LiquidBanner/> (docs coming soon)**
* [<mark style="color:blue;">**\<LiquidProduct/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/product)
* [<mark style="color:blue;">**\<LiquidProductListPage/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/product-list-page)
* **\<LiquidSearch/> (docs coming soon)**
* [<mark style="color:blue;">**\<LiquidCart/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/cart)
* [<mark style="color:blue;">**Carousel**</mark>](https://docs.modules.liquidcloud.app/modules/react/carousel)
  * **\<LiquidBrandCarousel/> (docs coming soon)**
  * [<mark style="color:blue;">**\<LiquidProductCarousel/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/carousel/product-carousel)
  * [<mark style="color:blue;">**\<LiquidCategoryCarousel/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/carousel/category-carousel)
* [<mark style="color:blue;">**\<LiquidCheckout/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/checkout)
* [<mark style="color:blue;">**\<LiquidOrderConfirmation/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/order-confirmation)
* [<mark style="color:blue;">**\<LiquidOrderTracking/>**</mark>](https://docs.modules.liquidcloud.app/modules/react/order-tracking)


---

# 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.modules.liquidcloud.app/modules/getting-started.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.