shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show a configuration as you build it with this tablet product card for React with Radix UI. A drawn tablet sits in a framed cell with a plus mark on each corner. Tick Pencil, Folio keyboard or Sleeve and that part is drawn onto the tablet: a pencil along the side, a keyboard under it, a sleeve around it. A Toggle Group picks 128, 256 or 512 GB and a Segment Group picks Wi-Fi or Cellular. The total, "With accessories", is worked out in cents from every choice. The one Shine button adds the set and turns into "Added" with an Undo; the "Bag" count follows and one polite line says what changed. On a phone the drawing comes first. Guides rule the bands. For tablets, devices with add-ons and any product whose options change how it looks.
FAQ
How do I change the options?
Edit EXTRAS, STORAGES and LINKS: each has a name and a price in cents, and BASE_CENTS is the tablet alone. The total is the base plus the chosen storage, connection and ticked accessories.
How do the accessories appear?
Picture draws each part in its own group and fades the group in when its id is in the ticked list, instantly under reduced motion. The image label lists the parts that are on.
What stays local, and how do I wire it for real?
The choices and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and send the ticked ids, storage and connection.
Is this a bundle discount?
No. The total is a plain sum with no discount, so it matches the prices beside each option.
