fetaUI
GitHub

Cart Button

A mini cart with item rows, a rolling subtotal and a Checkout that stays disabled while empty.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/cart-button
Playground
Cart2 items
Linen shirt$32.00 · Size M · Sand
1
Canvas tote$16.00 · One size
1
Subtotal$48.00
Items
Cart2 items
Linen shirt$32.00 · Size M · Sand
1
Canvas tote$16.00 · One size
1
Subtotal$48.00
Currency
Cart2 items
Linen shirt€32.00 · Size M · Sand
1
Canvas tote€16.00 · One size
1
Subtotal€48.00
Empty
Cart0 items
Your cart is emptyAdd something you love to see it here.
Subtotal$0.00
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/cart-button

Items

Each row has a stepper. A row leaves at zero and the subtotal rolls.

Cart2 items
Linen shirt$32.00 · Size M · Sand
1
Canvas tote$16.00 · One size
1
Subtotal$48.00
Motion

Accessibility

  • A labelled section. The subtotal keeps its full text for screen readers.

Motion

  • Subtotal digits roll.
  • Steppers follow Add to Cart Button.
  • With reduced motion, the press scale is off and color changes stay.

Responsive behavior

  • The tray fills the width on small screens.

Performance

  • Subtotal digits roll one by one, so only characters that change move.
  • Totals are computed on render from the items, with no stored copies.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CartButton and the CartItem type from @/components/fetaui/cart-button.
  • A new items list, by content, replaces the cart, so a parent can add or clear rows. Steppers edit the local copy and report it through onItemsChange.
  • Composes Add to Cart Button for each row and Button for Checkout.
  • onCheckout only tells you it was pressed. Each row's limit is the stepper default of 9.
  • There is no disabled prop. Checkout turns off when the cart is empty.
/docs/components/cart-button/markdown
PreviousAdd to Cart Button
NextMorph Popover

Related

Add to Cart ButtonComponentAdd opens into a quantity stepper in place.CheckoutComponentExpress pay, billing period, plan options, seats, add-ons, billing and card fields, and a live order summary.Product DetailsComponentExpandable Text and Review Card composed into a product block.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Payment MethodComponentA saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.