Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Color Palette Carousel Block for Ark UI

Six greyscale palettes as long ribbons of five named steps with WCAG contrast ratios and real copy buttons, and a switch that turns mandatory snapping on and off.

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 choose between stopping on each palette and a free fling, with this color palette carousel for React with Ark UI. Pigmentry, a palette tool, shows six greyscale palettes as long ribbons, each a name over five named steps from Ink 900 to Bone 50. A step is a band with its grey, its contrast ratio against the palette's lightest step, computed with the WCAG formula, and a Copy Button that really copies the value. A Switch "Snap to palettes" turns mandatory snapping on and off, and one status line says which, or which step was copied. The foot holds the counter, a thin position line and Previous and Next Buttons. The swatches are stored as plain greys, so they look the same in any theme, while the panel's own chrome stays in your theme. The bands are ruled by Guides. The palettes are made up for the example.

FAQ

How do I add my own palettes?

Edit PALETTES. Each has an id, a name and five steps, each a name and a light value, the lightness of a grey in percent. The last step is the base the ratios are measured against. Ratios are computed once from the greys, so nothing is typed twice.

What does the switch do?

On, the track stops on a palette after a drag. Off, a fling stops where it stops. The switch sets the Carousel's snapType between mandatory and proximity.

How is the contrast ratio worked out?

Each grey's relative luminance is computed with the WCAG 2 formula, and the ratio is the lighter over the darker, each plus 0.05, rounded to a tenth. The text on a band picks dark or light ink by the band's lightness.

How does it work with a keyboard?

Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears.

What stays local in the demo?

The palettes are typed example data. Copy uses your browser's clipboard, which needs a secure page, and the status line says when it is refused. To wire it for real, load palettes from your tool and keep the helpers.

How does it look on a phone?

One ribbon shows with the next peeking, and the switch and its status share the toolbar. The ribbon keeps a fixed height, so no step moves when you copy.

All 100 carousel blocks