CartSidebar

Displays the summary of items added to the cart along with detailed information and checkout options.

The CartSidebar component displays the summary of items added to the cart, along with detailed information and checkout options. The component is composed of the following:

CartSidebar: renders a SlideOver wrapper containing CartSidebarList and CartSidebarFooter.
CartSidebarList: wraps a series of CartItems and Gifts.
CartSidebarFooter: wraps an OrderSummary usually with the Checkout button.

Typical use cases include:

Displaying a slide-out cart sidebar from the header navigation.
Showing cart contents with order summary in checkout flows.
Presenting cart items with pricing and shipping information.
Providing quick access to cart management without leaving the current page.

Example

Code

Usage

Import the component


_10import { CartSidebar, CartSidebarList, CartSidebarFooter } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";

For details, see Importing FastStore UI component styles.

Design tokens

Local token	Default value/Global token linked
`--fs-cart-sidebar-bkg-color`	`var(--fs-color-neutral-bkg)`

Design tokens: List

The list section contains cart items and gifts, using padding to create adequate spacing between items and maintain visual hierarchy.

Local token	Default value/Global token linked
`--fs-cart-sidebar-list-padding`	`var(--fs-spacing-3)`

The footer section displays the order summary and checkout button, using background color and box-shadow to create visual separation from the list and emphasize the checkout action.

Local token	Default value/Global token linked
`--fs-cart-sidebar-footer-bkg-color`	`var(--fs-color-neutral-0)`
`--fs-cart-sidebar-footer-box-shadow`	`0 0 6px rgb(0 0 0 / 20%)`

Data attributes

You can target and override CartSidebar styles using the following data attributes: data-fs-cart-sidebar

data-fs-cart-sidebar-title

data-fs-cart-sidebar-list

data-fs-cart-sidebar-footer

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-cart-sidebar`
title	`string`	Title for the CartSidebar component.	`Your Cart`
direction	`"leftSide" \| "rightSide"`	Represents the side that the CartSidebar comes from.	`rightSide`
size	`"full" \| "partial"`	Represents the size of the CartSidebar.	`partial`
totalItems*	`number`	Total of item in the Cart.
alertIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon on the Alert component.
alertText	`string`	The content for Alert component.
overlayProps	`Props`	Props forwarded to the `Overlay` component.
onClose*	`() => void`	Function called when Close Button is clicked.

Best Practices

✅ Do's

Always include CartSidebarList and CartSidebarFooter to provide a complete cart experience.
Display accurate item counts using the totalItems prop to help users understand their cart contents.
Use the alertIcon and alertText props to communicate shipping thresholds or promotional messages.
Include an OrderSummary component in the footer to show pricing breakdown and total.
Ensure the sidebar can be easily closed and doesn't block critical page content.
Display cart items using CartItem components for consistent presentation.

❌ Don'ts

Don't omit the order summary or checkout button from the footer.
Don't display incorrect item counts or pricing information.
Avoid cluttering the sidebar with too many promotional messages or alerts.
Don't make the sidebar too narrow or too wide—ensure it's suitable for viewing cart contents.
Avoid blocking important page content when the sidebar is open.
Don't forget to handle empty cart states appropriately.

- Subtotal (3 products)$1,200
- Discount-$100
- Total$1,100
OrderSummary
This component provides a summary of the items in the cart, including the total price, shipping, taxes, and discounts.
See more
Apple Magic Mouse
Original price:$999Price:$950.04
CartItem
CartItem displays the summarized information of a product in the cart.
See more