Billing Cart Mini

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button, scroll-area dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing31.tsx instead.

Usage

The file also exports billing31Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing31, billing31Demo } from "@/components/blocks/billing/billing31";

export default function Page() {
  return <Billing31 {...billing31Demo} />;
}

Props

Types

interface CartLineItem {
  id: string;
  name: string;
  description?: string;
  price: string;
  period?: string; // e.g. "/mo" or "once"
  quantity?: number;
}

Behavior notes

• The item list sits inside a ScrollArea capped at max-h-72, so it scrolls internally once there are more items than fit rather than growing the whole block.
• Quantity is only shown as a "2x" prefix on the item name when quantity is greater than 1; there's no built-in increment or decrement control.
• The subtotal and every line item price are plain strings, so currency formatting, rounding, and totals math are entirely up to the caller.
• Both the checkout and continue-browsing actions render as next/link, not buttons with onClick handlers, matching this category's other href-driven blocks.
• An empty items array replaces the list with a centered "Your cart is empty" message; the checkout button still renders underneath it.

Frequently asked questions