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 https://ui.aryank.space/r/dial-product-slider.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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