Dial Product Slider
A product reel driven by a single round controller. Arrows step the reel, which keeps a fixed buffer either side of center and recycles the far items so the catalogue loops without cloning. Pressing the middle turns the dial inside out: the outer ring closes to a point, the inner disc opens into a close button, the flanking products fan out and fade, the background fills with the product shot, and a detail card slides up into the middle.
npx shadcn@latest add @compronents/dial-product-sliderInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| products | DialProduct[] | Ten BLANK products | Each product's cutout, name, tag, price, and detail link. The reel loops through however many are supplied. |
| brand / menuLabel / detailLabel | string | BLANK copy | Nav label, dial caption, and the detail card button. |
productstextName, image, price, tag, and link per product.
gsap