shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what the settings do with this camera product card for React with React Aria. A hairline frame with a plus mark on each corner holds a viewer band: Tabs switch between Portrait, Landscape and Action samples drawn in greyscale, an aperture Slider from f/1.8 to f/11 blurs the background shapes only, and an ISO slider from 100 to 6400 raises a drawn grain over the frame. The caption under the picture is typed per sample for the shutter speed and follows the sliders, for example "f/1.8, 1/250 s, ISO 100". A band below holds the spec list, the rating, stock in words, the price and the single Shine Button that says "Add to bag" and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages where a feature is easier to show than to describe.
FAQ
How are the blur and the grain made?
Both are CSS. The background shapes sit in their own layer with a filter: blur() set from a --blur variable, so the subject in front stays sharp; the grain is a layer of two offset dot gradients whose opacity comes from --grain. lookOf turns the two slider positions into those variables.
Where does the caption come from?
The shutter speed is typed on each sample in SAMPLES; the aperture and ISO come from the sliders through captionOf. Change the typed shutter or the stops in APERTURES and ISOS to fit your lens.
How do the sliders work for a keyboard and a screen reader?
Each is a named slider with arrow, Home and End keys. Its spoken value is the stop ("f/2.8", "ISO 800"), and the status line announces the new caption when you let go instead of on every step.
Can I add a sample?
Add an entry to SAMPLES with a typed shutter, then a background and a subject in BACKS and FRONTS, each a list of greyscale shapes in a 120 by 80 box. The tabs list whatever is in the array.
What stays local, and how do I wire it for real?
The tab, the two sliders and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. In a real page swap the drawn scenes for photos taken at each setting, or keep the CSS blur over one photo.
