Shopping listPro

A list you and the agent keep together: sections, prices and stores, what it added, and Buy remaining.

Markdown

On this page

ProFour dinners as one list: the agent's additions carry a rail, tick what you have and buy the rest.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/shopping-list

Usage

tsx

import { ShoppingList } from "@/components/ui/chatcn/pro/shopping-list"

<ShoppingList
  title="Dinners, Mon to Thu"
  items={list.items}
  onItemsChange={list.set}
  onAdd={(title) => list.add(title)}
  onBuy={(items) => grocer.order(items)}
  currency="GBP"
  locale="en-GB"
/>

Items group by section, in the order they first appear. What the agent added or changed since you last looked carries a thin rail on its leading edge (fresh), and a swap explains itself under the item (note). Ticking draws a strike across the name from start to end instead of switching one on. The header counts what is done with a small meter; the footer names the stores and buys what is left in one go, with the estimate rolling as you tick. Pass onItemsChange to control the items; without it the list keeps its own copy.

Examples

States

ProA failed order with long names, all checked off, empty, loading.

Props

Prop	Type	Notes
`items`, `onItemsChange`	`{ id, title, amount?, price?, store?, section?, checked?, fresh?, note? }[]`	Controlled when `onItemsChange` is set
`title`	`ReactNode`	Default "Shopping list"
`onAdd`	`(title) => ShoppingItem \| undefined \| Promise<...>`	Shows the add field; resolve with the new item
`onBuy`	`(items) => unknown \| Promise<unknown>`	Gets what is left. Reject to show the error
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`loading`, `disabled`	`boolean`	States
`labels`	`Partial<ShoppingListLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	Each item's checkbox and remove button, the add field, then Buy
Space	Tick an item
Enter	Add the typed item

Accessibility

Items are native checkboxes named Got with the item; remove buttons are named with the item.
Agent additions add Added by the agent to the name in text; the rail is decorative.
The done count and the order outcome are status messages.

Motion

The strike draws across in 200 ms and the tick scales in 150 ms. The estimate rolls changed digits in 300 ms. Reduced motion drops the strike and roll movement and keeps fades.