shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show how much a bag really holds with this backpack product card for Svelte with Ark UI. A drawn pack at the start gets taller with the size you pick in a Segment Group (25, 35 or 45 L), and a fill rises inside it as you tick things in a list of Checkboxes: each has a typed volume in litres, from a 1 L towel to a 6 L sleeping roll. The total reads "21 of 35 L" on the drawing and beside it, turns into "2 L over" when the pack is too full, and a Badge says "Carry-on size" or "Checked bag size" from the litres alone (up to 40 L). One Shine Button adds the pack at the size's price. Guides rule the bands. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. For luggage, bags and any product where capacity is the question.
FAQ
How do I change the sizes and the things?
Edit SIZES (a label, the litres and the price in cents) and THINGS (a name and its litres). The drawing's height, the fill and the carry-on test are all worked out from those numbers, and CARRY_ON_MAX sets the carry-on limit.
How is the fill worked out?
The ticked things add their litres. The fill is that total divided by the size, capped at full. Past the size the pack is drawn with a bulge and the figure reads how many litres over. Nothing stops you adding it to the bag.
Is the carry-on badge a real airline check?
No. It is a rule of thumb in the demo: up to 40 L counts as carry-on size. Airlines differ, so replace isCarryOn with the limits you publish.
What stays local, and how do I wire it for real?
The size, the ticks and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The drawing is typed shapes: swap Pack for an image of each size.
