> For the complete documentation index, see [llms.txt](https://docs.modules.liquidcloud.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.modules.liquidcloud.app/modules/getting-started.md).

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