Cart
The Cart component displays the items in the user's cart, along with a summary of the total cost.
- Displays the items in the user's cart
- Displays a summary of the total cost
- Allows the user to remove items from the cart
- Allows the user to update the quantity of items in the cart
Installation
Run the following command
npx vibes@latest add cartUsage
Refer to the example above for a complete reference on how to use the Cart component.
API Reference
CartProps
| Name | Type | Default |
|---|---|---|
title | string | |
summaryTitle | string | |
emptyState | CartEmptyState | |
lineItemAction* | Action<CartState<LineItem>, FormData> | |
checkoutAction* | Action<SubmissionResult | null, FormData> | |
checkoutLabel | string | |
deleteLineItemLabel | string | |
decrementLineItemLabel | string | |
incrementLineItemLabel | string | |
cart* | Cart<LineItem> | |
couponCode | CouponCode |
Cart
| Name | Type | Default |
|---|---|---|
lineItems* | LineItem[] | |
summaryItems* | CartSummaryItem[] | |
total* | string | |
totalLabel | string |
CartState
| Name | Type | Default |
|---|---|---|
lineItems* | LineItem[] | |
lastResult* | SubmissionResult | null |
CouponCode
| Name | Type | Default |
|---|---|---|
action* | Action<CouponCodeFormState, FormData> | |
couponCodes | string[] | |
ctaLabel | string | |
disabled | boolean | |
label | string | |
placeholder | string | |
removeLabel | string |
CouponCodeFormState
| Name | Type | Default |
|---|---|---|
couponCodes* | string[] | |
lastResult | SubmissionResult | null |
CartEmptyState
| Name | Type | Default |
|---|---|---|
title* | string | |
subtitle* | string | |
cta* | CTA |
LineItem
| Name | Type | Default |
|---|---|---|
id* | string | |
image* | Image | |
title* | string | |
subtitle* | string | |
quantity* | number | |
price* | string |
CartSummaryItem
| Name | Type | Default |
|---|---|---|
label* | string | |
value* | string |
Image
| Name | Type | Default |
|---|---|---|
src* | string | |
alt* | string |
CTA
| Name | Type | Default |
|---|---|---|
label* | string | |
href* | string |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --cart-focus: var(--primary); --cart-font-family: var(--font-family-body); --cart-title-font-family: var(--font-family-heading); --cart-text: var(--foreground); --cart-subtitle-text: var(--contrast-500); --cart-subtext-text: var(--contrast-300); --cart-icon: var(--contrast-300); --cart-icon-hover: var(--foreground); --cart-border: var(--contrast-100); --cart-image-background: var(--contrast-100); --cart-button-background: var(--contrast-100); --cart-counter-icon: var(--contrast-300); --cart-counter-icon-hover: var(--foreground); --cart-counter-background: var(--background); --cart-counter-background-hover: color-mix(in oklab, var(--contrast-100) 50%, transparent);}