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