Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Color Scheme Onboarding Block for Svelte

An onboarding screen with six round accent swatches as radios and a framed preview of a wiki page that takes the accent for a dot, a progress bar, a focus ring and a link underline, never for text or button fills.

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 an accent and see exactly where it will show up, with this color step for Svelte with Ark UI. It's the third step of Tintmoor, a team wiki: the page's side rails run its full height and one band crosses the screen between two rules. After the step header (the product's mark, “Step 3 of 5” and a hairline of progress) and the heading, six round swatches (Slate, Blue, Green, Amber, Rose, Violet) are native radios in one fieldset. Under them a framed preview of a wiki page takes the accent in four small places: a dot, the bar of a Progress, a ring and a link underline. A derived line says what the accent is used for. Apply accent is the only colored control, a Shine Button, and says it is preview only.

FAQ

Where does the accent show, and where does it not?

On a dot, a progress fill, the ring around an outline button and a link's underline: marks that carry no text. Text and button fills stay in the theme, so no accent can make a label unreadable. That is also the rule for your own app: use an accent for rings and marks, and keep its contrast against the surface in mind before using it for text.

How are the swatches defined?

Each is a typed hue number at one lightness and, apart from Slate, which is nearly grey, one chroma, built into an OKLCH color by a helper. Only the hue differs, so the six look equally strong in light and dark themes. Add or change a swatch by editing SWATCHES.

How do I choose with the keyboard?

The swatches are native radio buttons in one group: Tab enters the group, the arrow keys move the choice, and the chosen disc has a ring. The preview follows each move, and the status line says which accent is being previewed.

What does Apply accent do?

It says “Preview only: page keeps its theme.” and remembers which accent was applied, so pressing it again for the same one says it is already the accent. The page you are reading never changes color: the accent is set as a CSS variable on the preview's own box and nowhere else.

What stays local in the demo, and how do I wire it?

Everything. Nothing is saved or sent. In your app store the chosen swatch with the workspace, set its color as a CSS variable on your app's root, and use that variable for rings, marks and link underlines.

How does it look on a phone?

The same, in one column: the three-by-two swatches, the preview and the line under it, with Apply accent pinned to the foot of the screen and the status line above it.

All 100 onboarding blocks