shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Say how cold a night a bag can take with this camping gear product card for Vue with Ark UI. A drawn sleeping bag sits beside its name, price and a row of four seasons worked out from the comfort figure. Below it a Slider named "Coldest night" runs from -25 to +15 degrees, a marker moves along a drawn thermometer band of three zones, and the verdict reads "Within the limit: you may feel cool" next to a Badge. The comfort, limit and extreme ratings are typed. One Shine Button adds the bag. 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 sleeping bags, jackets, boots and anything with a temperature rating.
FAQ
How do I change the ratings?
Edit COMFORT, LIMIT and EXTREME (degrees Celsius), the SEASONS with a typical night low each, and the slider's COLDEST and WARMEST. The band's zones, the marker, the season row and the verdicts are worked out from those.
How is the season row derived?
A season suits the bag when its typical low is no colder than the comfort figure. Each season carries a tick or a cross and a screen reader hears whether it suits.
What do the three zones mean?
At or above comfort most sleepers stay warm, between comfort and limit you may feel cool, and below the limit you will be cold. The extreme rating is for survival only and lies past the end of the slider.
What stays local, and how do I wire it for real?
The night 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 ratings are typed for the demo; use your tested figures.
