shadcn.io is not affiliated with official shadcn/ui
Theme Preview Carousel Block for Ark UI
Four greyscale themes as radio cards under a drawn sample app that re-tones as you choose, with the text-on-ground contrast of each derived from its lightness values and one Apply button.
Installation
Overview
Let people try a theme on something that looks like their product before they commit, with this theme preview carousel for React with Ark UI. Skinwright, a theme builder, offers four greyscale themes (Paper, Slate, Ink and Mist). A stage band at the top draws a small app: a sidebar, a card and a button. Choosing a card under it re-tones the sample at once. The sample is drawn with four CSS variables (ink, line, paper and soft) that are set on the stage alone, so this page's own theme never changes. Each card on the hairline track shows a swatch, the theme's name, the contrast of its text on its ground derived from the typed lightness values ("16.6 to 1, Passes AAA") and a "Current" mark on the theme that is applied. The cards are native radio buttons in one group, and the track follows the choice. The block's one primary, "Apply Slate" (Shine Button), makes the chosen theme the sample's current one. The foot holds the counter, a dot for each step and Previous and Next Buttons. Two cards show from the medium breakpoint with a third peeking, one with the next peeking on a phone. The ruled bands come from Guides. The themes are made up for the example.
FAQ
Does choosing a theme change the page?
No. The theme's colours are set as CSS variables on the sample's box only, and every colour in the drawing reads from them. Nothing touches :root, the document or your site's theme, so the same block can sit on a light or a dark page.
Where does the contrast figure come from?
Each theme types four lightness values (OKLCH, no chroma). The page turns a grey's lightness into its relative luminance (the lightness cubed), then divides the lighter by the darker, each plus 0.05, as the WCAG formula does. At 4.5 to 1 the word is "Passes AA", at 7 to 1 "Passes AAA", and below that "Fails AA". The result is computed once at module scope.
What does Apply do?
It sets the chosen theme as the sample's current one: the "Current" mark moves, the caption under the sample says so and the status line reads "Slate applied to the sample in this demo." If the chosen theme is already current, the button is unavailable and answers so when pressed. Nothing is saved.
How does it work with a keyboard?
The cards are a native radio group inside a fieldset, so Tab enters it on the chosen card and the arrow keys move and choose; the track scrolls when the choice moves to a card out of view. Previous and Next stay in the tab order at the ends. The drawn sample is hidden from assistive technology and described by its caption.