Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Headphones Product Card Block for Vue

Over-ear headphones with four noise modes in a segmented group and a band of 28 bars that falls as the mode gets stronger, with typed low-rumble and battery figures.

UI library: Ark UI

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

Let shoppers hear the difference with this headphones product card for Vue with Ark UI. A drawn pair of over-ear headphones sits beside a Segment Group with Off, Transparency, Noise cancelling and Max. Under it a band of 28 bars draws the room: each mode lowers the bars, low rumble more than high hiss, and the heights ease down in CSS, instantly under reduced motion. Typed figures give the level at low rumble, such as "−32 dB", and the battery life for the mode. The one Shine button turns into "Added" with an Undo and the "Bag" count follows. Guides rule the bands. For headphones, earbuds and any product with modes that change what you hear.

FAQ

How do I change the modes?

Edit MODES: each has a name, a strength (how much of the lowest pitch it removes), the typed rumble text and battery hours. The room is ROOM, 28 typed levels.

Are the bars a measurement?

No. They are an illustration worked out from the typed strength, and the figures beside them are typed in this demo.

What stays local, and how do I wire it for real?

The mode and the bag are page state; nothing is stored, charged or sent. Replace add and undo with calls to your cart.

What happens under reduced motion?

The bars jump to their new height with no transition.

How does it look on a phone?

The headphones sit above the mode group, which becomes two columns, and the bars span the width.

Is it accessible?

The mode group is a named set of segments that works with the arrow keys. The bars are decoration; the low-rumble level and battery are text, and each change is announced by the polite status line.

All 100 product cards blocks