Cart drawerPro
Products fly into the cart, counts roll, and a drawer handles quantities, shipping progress, and checkout.
- Product listings where people add several items and review them in a side cart.
- Stores that show a free shipping threshold and promo codes before checkout.
- Demos of an add to cart interaction with clear feedback on where the item went.
- Use checkout-flow for a full multi-step checkout with address and payment.
- Use checkout-summary when you only need the order summary and totals.
- Use drawer for a generic side panel that is not a cart.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { CartDrawer } from 'animui/cart-drawer';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this as a starting point and replace the sample data with your own.
import { CartDrawer } from "animui/cart-drawer"; export function ShopPage() { return <CartDrawer />;}CartDrawer
A product grid with a slide-in cart. Adding an item arcs its photo into the cart button, lines can be swiped away, a free shipping bar fills, promo codes validate, and the checkout button folds into a confirmation disc. Products, prices, and the order are sample data; checkout is simulated. Also the default export.
No props.
- EnterorSpace
- Adds a product, opens the cart, and runs the quantity, remove, and checkout buttons.
- Escape
- Closes the drawer, except while an order is being placed. Focus returns to the cart button.
- Enter (promo field)
- Applies the promo code.
- The cart button has aria-haspopup="dialog", aria-expanded, and a label with the item count. The drawer is role="dialog" with aria-modal and moves focus to its close button.
- The shop behind an open drawer is inert, and the drawer body is inert while an order is placing.
- Quantity steppers are labelled groups; the minus button becomes "Remove" at quantity one. Swipe to remove has button equivalents.
- The shipping bar is a role="progressbar"; an invalid promo sets aria-invalid and swaps the note under the field.
- Adds, removals, promo changes, and the placed order are announced in a polite live region.
- The product photo flies along a quadratic arc into the cart over 780ms, shrinking and tilting; the badge count only changes when it lands, then the cart bumps and rings.
- The drawer slides in on a critically damped spring. Rows collapse in height when removed and the totals roll with AnimatedCounter.
- Swipe a row left past 110px, or flick it, to remove; short drags snap back with the release velocity.
- The checkout button shares a layoutId with the confirmation disc, then a checkmark draws in.
- Reduced motion skips the flight and the bump, disables row dragging, fades the drawer instead of sliding it, and zeroes the remaining springs.
- The root is a size container. Above 640px the grid has three columns; at 640px and below it has two, with tighter padding.
- At 380px and below the cart label hides, prices stack under names, and the drawer fills the block with a 4px inset.
- Rows accept horizontal drag with direction lock, so vertical scrolling in the drawer still works on touch.
- Each flight is driven by one motion value and transforms, not React state per frame; several flights can overlap.
- The drawer and scrim only mount while open; timers are cleared on unmount.
- Product images use next/image with sizes for 50vw on small screens and 260px otherwise.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for an ecommerce page where adding to cart and reviewing the cart happen without leaving the grid.
- Replace PRODUCTS (with PhotoId images from animui/lib) and the FREE_SHIPPING, SHIPPING, and PROMO constants; swap the image source for your own URLs if needed.
- There are no props. Connect the add, setQty, remove, applyPromo, and checkout functions to your cart store and payment flow; checkout currently waits 1.3s and shows a sample receipt.
- Composes animui Button and AnimatedCounter.
The full library index for assistants is at /llms.txt.
