shadcn.io is not affiliated with official shadcn/ui
Preferences Onboarding Block for Svelte
Five default settings written as one sentence of inline selects (start view, row density, first day of the week, digest, sounds) over a drawn strip of the app that shows each choice, with a Reset and one Save.
Installation
Overview
Let people set their defaults in a line they can read with this preferences step for Svelte with Ark UI. It is a step of Dialwick, a podcast app, as a whole screen: the page's rails and one band, a step header (“Step 5 of 6” and a hairline) and a framed panel. The panel is a sentence, “Open to Today, show comfortable rows, start the week on Monday, send me a digest weekly and play sounds never”, and each underlined word is a real select you change in place. Under it a small drawn strip of the app shows what the five words do: the view name on the app bar, three episode rows at the chosen density, a week header that starts on the chosen day, the digest and a sound icon. Save preferences is the one Shine Button, with a ghost Reset to defaults beside it. Nothing is stored.
FAQ
How do I add or change a blank?
Each blank is a Blank with a field, a label for assistive tech, a list of { label, value } choices and the current value. Add a key to Values, a list of choices and a Blank in the sentence, then let Strip read the new value. The words around a blank are plain text, so keep each choice short enough to read as part of the sentence.
How do the selects get their names?
A bare select in a sentence has no label of its own, so each one carries an aria-label that repeats the words before it (“Open to”, “Start the week on”). A screen reader announces the label and the chosen value; the sentence is also readable as ordinary text around them.
What does the strip show, and does it move the page?
It redraws from the five values: the app bar's title, the week header's letters rotated to the chosen first day, three rows that are 36 px or 24 px tall, a digest label and a speaker icon that is muted when sounds are never. It is a picture, so it is hidden from assistive technology and not focusable. Its box has a fixed height, so a denser list never moves the buttons.
What stays local in the demo, and how do I wire it?
The choices live in the page and Save preferences only says it saved in this demo. In your app send the five values to the account where submit says so. Reset puts back the DEFAULTS constant, which should be your product's real defaults.
Does it work right to left?
The layout uses logical sides, the step count and the sentence's values sit in bdi, and the selects follow the page's direction. A sentence built from separate words does not translate word by word, so for a right-to-left language write the whole sentence in that language and keep the blanks in the places its grammar needs.