shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what a sound profile does with this speaker product card for React with React Aria. A drawn waterproof speaker sits in a tile with its price, a battery of 14 h and an "IP67" badge whose Tooltip says what it means. In a side cell with a plus mark on each corner, a Toggle Group picks Flat, Bass, Vocal or Night and a five-band EQ curve fades to that profile, with each band's gain listed under it. An outline Button turns into "Added" with an Undo and the "Bag" count follows. On a phone the curve stacks under the tile. Guides rule the bands. For speakers, soundbars and any product with presets that change its response.
FAQ
How do I change the profiles?
Edit PROFILES: each has a name and five gains in dB for 60 Hz to 12 kHz. The curve is built from them, so the drawing and the numbers always agree.
How does the IP67 tooltip work?
The badge is a real button, so it opens on hover and on keyboard focus, and the same sentence is the badge's description.
What stays local, and how do I wire it for real?
The profile and the bag are page state; nothing is stored, charged or sent. Replace add and undo with calls to your cart.
