Surfaces
Sheet
Slide-in panel surface for overlaying content such as carts, filters, or detail views without leaving the page.
Overview
The Cart Sheet provides shoppers a non-disruptive way to review and modify their cart contents through a slide-in overlay triggered by cart interactions. It consolidates essential cart management features including real-time quantity adjustments with optimistic updates, coupon code application via an expandable accordion, and a dynamic free shipping progress indicator. The component displays a complete cost breakdown with localized currency formatting and prominently shows accepted payment methods, enabling confident purchase decisions without navigating away from the current browsing context.
Key Business & UX Benefits
- Lets users review and edit the cart without leaving the page.
- Keeps header, content, and footer in one predictable layout.
- Supports scrollable content so long lists don’t overflow the viewport.
- Slide-in pattern is familiar and works well on mobile and desktop.
Pro-Tip from Larry: Use Sheet for cart and filters so users can peek and close without losing context.
Usage
Sheet
<Button variant="primary" @click="toggleSheet">Open Sheet</Button>
<Sheet v-bind="args" v-model:open="isOpen">
<SheetHeader>
<h2>Sheet Title</h2>
<SheetClose />
</SheetHeader>
<SheetContent>
<p>Some random content here...</p>
<p style="height: 1000px;">More content...</p>
</SheetContent>
<SheetFooter>
<p>Footer content</p>
</SheetFooter>
</Sheet>
Feature List
- Line item display with quantity selector and remove action
- Free shipping progress bar with success state
- Coupon code accordion with apply functionality
- Payment method logos and checkout button
API Reference
Sheet
| Prop | Default | Type |
|---|---|---|
position | right | Position ("left" | "right" | "top" | "bottom") |
component | Component | |
container | modal | Container ("modal" | "sheet") |
a11yTitle | string | |
a11yDescription | string | |
scrollThreshold | 10 | number |
menuWidth | string | |
open | false | boolean |
| Slot | Type |
|---|---|
default | {} |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
SheetClose
| Event | Type |
|---|---|
click | (event: "click"): void |
SheetContent
| Prop | Default | Type |
|---|---|---|
noPadding | boolean |
| Slot | Type |
|---|---|
default | {} |
SheetHeader
| Slot | Type |
|---|---|
default | {} |
SheetFooter
| Slot | Type |
|---|---|
default | {} |