shadcn.io is not affiliated with official shadcn/ui
Packing List Todo List Block for React
A packing list for a six-night trip with fifteen items in four categories, a Cabin or Checked bag choice per item, two weight meters that re-add when you move an item, and an overall packed bar.
Installation
Overview
Pack against the airline's limits, with this packing to-do list block for React with Base UI. Fifteen items sit in four category cells on shared hairlines, each with a Checkbox for packed, a quantity and a weight in grams, and a Segment Group that puts it in the Cabin or the Checked bag. Two meters on top read "7.2 kg of 8 kg" and "4.4 kg of 10 kg" with a Progress bar and the margin in words, "800 g spare" or "Over by 650 g"; moving an item between bags re-adds both. A third meter counts what is packed. Guides rule the cells. For travel apps, trip planners and checklists with a weight or size limit.
FAQ
How are the bag weights worked out?
Each item's weight is its quantity times its grams, and a bag's load is the sum of the items assigned to it, packed or not, so you can plan before you pack. Weights are whole grams and print as "800 g" or "7.2 kg".
What happens when a bag is over its limit?
Nothing is blocked. The meter says "Over by 650 g" in words, the bar fills to its end and the status line announces it after the move, so you can decide what to take out.
How do I move an item between bags?
Press Cabin or Checked under the item; arrow keys move between the two. The row stays where it is and both meters update at once.