Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Grocery List Chat Block for Vue

A household chat with a shared shopping list pinned above it: items by aisle with a checkbox, quantity and the adder's initial, an Add row, a count of what is in the basket, and a quiet system line in the thread for each tick.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Shop together without leaving the conversation, with this grocery list chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Cupboardby, a shared shopping app: the top bar names your housemate, Bertrand Fenwarden, with a count such as "4 of 9", and a band under it pins the list. The band holds nine items grouped by aisle, each a Checkbox with its name, a quantity Badge and the initial of whoever added it; ticking one moves it to "In the basket" and adds a quiet system line to the thread, and the Add row takes a name and a quantity and files the item under a guessed aisle. The band scrolls inside itself and below it the thread is plain Message and Bubble rows with typed replies after a Typing Indicator Text. The composer's Shine Button is the only colored control. It's the starting point for a household app, a shared errands list or any chat with a live checklist.

FAQ

What stays in the page, and how do I make it real?

All of it. The list, the ticks, the added items and the replies live in this page's state and are gone on reload; nothing is saved or synced and no model runs, as the line under the composer says. To wire it for real, write each tick and each added item to your list store where tick and add run, and push the other person's changes into the same state as they arrive.

Where does the count come from?

It is never typed. One helper counts the ticked items and the top bar, the band and the status line all read it, so "5 of 9" and "4 still to get" always agree with what you see in the list.

How does an added item find its aisle?

A small helper looks for words such as milk, banana or lemon in the name and files the item under Dairy or Produce, and everything else under Pantry. Replace it with your own categories or a lookup in your product data. The quantity is a whole number from 1 to 99; anything else becomes 1.

Is it usable with a keyboard and a screen reader?

Each row is a labelled checkbox whose name includes the quantity and who added it, so a screen reader hears "Butter, 1, added by you". After you tick an item, focus stays on its checkbox where it moves to, and the status line says what changed. The thread is a log region, so the system lines are announced once.

Does the window change size when the list changes?

No. The list band has a fixed height and scrolls inside itself, the thread takes the rest, and the window keeps its height, so adding or ticking items never pushes the composer.

How does it look on a phone?

The same single column. The band stays above the thread with its own scroll, the Add row keeps its name field, quantity and button on one line, and only the band and the log scroll, even at 320 px wide.

All 200 chat blocks