Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

3D Ring Carousel Features Block for Radix UI

Six capability cards on a true 3D ring in a framed stage, turned a card at a time by the previous and next buttons or the arrow keys, with the far cards dimming behind the front one.

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

A 3D ring carousel features section for React with Radix UI. Six capability cards of a 360-degree product-tour tool stand on a real circle in CSS 3D inside a framed stage: the front card is whole, the two beside it turn away in perspective, and the cards behind show their plain backs, dimmed. Each card has a small panorama drawing (a hotspot, a floor plan, a path, an embed tag, an offline chip, a few bars) over its title and one sentence. The previous and next buttons under the stage turn the ring a card at a time, and the arrow keys do the same while a button has focus. It's built from Button and Guides, with CSS transforms and transitions only and your theme's tokens for every colour. For product tours, galleries and any set of six things that read well as an object you can turn.

FAQ

How is the ring built?

The ring is a list with transform-style: preserve-3d inside a stage with perspective. Each card is rotated by 60 degrees times its place (--i) and pushed out along z by the radius (--r); the whole ring is turned by one custom property, --turn, which is a step count. A CSS transition on transform does the turning, and there is no script frame loop.

How do I change the cards?

Edit CAPABILITIES (a title and a sentence each) and the six Face entries, each of which takes its panorama overlay as children. The ring is built for six: the 60 degrees come from 360 divided by six, so another count needs that number, the radius and the DIM list changed together.

What can a keyboard or a screen reader do?

Only the front card is in the reading order and the tab order; the others are inert and hidden from assistive technology, and a polite status line reads out the new front card when the ring turns. The buttons are named "Previous capability" and "Next capability", and the left and right arrow keys turn the ring while one of them has focus, following the page direction.

Why does it always turn the short way round?

The ring counts turns without wrapping, so going from the last card to the first is one more step in the same direction, never a long spin back. Which card is in front is that count taken modulo six.

What happens with reduced motion?

The turn and the dimming transitions are off, so the ring jumps to the next card and the cards change opacity at once. Nothing plays by itself.

How does it fit on a phone?

The cards are narrower and the radius is smaller, so the ring is the same shape at 375 pixels with its side cards just inside the frame. The buttons stay under the stage and the stage keeps its height, so nothing shifts when you turn it.

All 170 features blocks