Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Snap Alignment Carousel Block for Solid

Six team values 1.4 views wide with an Anchor switch (Start, Centre, End) and a drawn side cell that shows where the current value snaps in the view.

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

Show what snap alignment does, with this culture values carousel for Solid with Ark UI. Ethoswell, an HR platform, lists six values (say it early, own the follow-up, teach what you know, leave it tidier, assume good intent, rest is part of the work), each a cell 1.4 views wide with an "in practice" line and a short team quote. A toolbar band holds a Segment Group "Anchor: Start, Centre, End" that sets where the current cell snaps. A side cell, under the track on a phone, draws the view as a frame and the cells as boxes, the current one solid, placed with the same sums the track uses, so you see what each option does. Under the track a foot holds the status, a dot for each value and Previous and Next Buttons. It's built from Carousel, Segment Group, Button and Guides. The values and quotes are made up.

FAQ

How do I use my own values?

Edit VALUES: an id, a title, a practice line, a quote and the team that said it. The drawing is made from the list, the page and the anchor, so it follows any number of cells. Change WIDE (and the VIEW class) to change how many views wide a cell is.

What does the anchor do?

It sets which edge of the current cell meets which edge of the view. At Start the cell begins at the view's start edge, at Centre it sits in the middle, and at End it finishes at the view's end edge. Changing it re-seats the current value, and the drawing slides to match. The anchor is each cell's snapAlign. The track cannot scroll past its ends, so near the first and last cell the real position can fall short of the drawing.

How does it work with a keyboard?

Tab reaches the switch, the dots, Previous and Next. With focus inside the carousel, the arrow keys move one value (mirrored in a right-to-left layout) and Home and End jump to the first and last. Values out of view are hidden from the tab order and from screen readers.

What is announced when it moves?

The status line is the one polite live region: "Value 2 of 6, anchored at centre". The drawing is decorative and hidden from screen readers; the same information is in the line and in the caption under it.

What stays local in the demo?

Everything; the anchor is a view option held in the page. To wire it for real, keep VALUES in your CMS and choose one anchor for your design instead of offering the switch.

What happens in a right-to-left layout?

The track mirrors and the arrows swap. The drawing is a fixed left-to-right diagram of the sums, so read it as an illustration of the options, not as a copy of the page.

All 100 carousel blocks