Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Subscription Boxes Carousel Block for Ark UI

Four themed boxes on a vertical wheel with the middle one whole and its neighbours half seen, and a detail cell with a Frequency switch that re-derives the price per delivery in integer cents, the last three boxes drawn and a Subscribe button.

Framework
UI library

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 people turn a wheel of boxes and see exactly what each cycle costs, with this subscription boxes carousel for React with Ark UI. Boxmoor, a box subscription, offers four boxes (Pantry, Garden, Teatime and Workshop). A vertical centred wheel at the start shows the middle box whole and the one above and below half seen, and the detail cell beside it follows the middle box. A Segment Group sets the Frequency (Monthly, Every 2 months, Quarterly) and the price per delivery is worked out in integer cents from the monthly price, the months covered and the discount (5% and 10% for the longer cycles), with the cost a month, the deliveries a year and the yearly total beneath it. The last three boxes are drawn as item sketches, and the one primary is the Shine Button "Subscribe to Pantry box". The arrow keys turn the wheel; on a phone the wheel sits above the detail. The boxes and prices are made up and nothing is charged.

FAQ

How do I change the boxes and prices?

Edit BOXES and FREQUENCIES. A box has a price in cents a month, an item count, a theme and three past boxes of item kinds. A cycle has the months it covers and its off percent; the delivery price is price × months × (100 − off) / 100, rounded to the cent, and the month and year figures are derived from that one number.

How does the wheel work?

It is a vertical carousel with centred slides showing two boxes' worth of height, so the middle box is whole and its neighbours are half seen. Pressing a neighbour, the Up and Down buttons or the arrow keys bring a box to the middle, and the detail follows. Boxes more than one away are hidden from the tab order.

What does Subscribe do?

It only says so: "Subscribed to Pantry box, every 2 months, in this demo. Nothing was charged." in the block's one polite status line. Choosing another box or cycle clears it.

How does it work with a keyboard?

Tab reaches the visible boxes, Up, Down, the Frequency switch and Subscribe. ArrowUp and ArrowDown turn the wheel and Home and End go to the first and last box. The wheel is the Carousel with orientation="vertical" and centred slides.

What stays local in the demo?

Everything. Nothing is charged or saved. To wire it for real, send the box id and cycle to your billing API from subscribe and keep the price on the server too.

How does it look on a phone?

The wheel keeps its height above the detail, three rows tall, and the Up and Down buttons sit under it. The detail follows in reading order.

All 100 carousel blocks