shadcn.io is not affiliated with official shadcn/ui
No Preferences Empty State Block for Svelte
A full-height first-preferences screen for a settings app: three switches under an All defaults badge and a drawn three-fader mixing panel whose knobs slide with the switches, with Save preferences and Reset.
Installation
Overview
Turn an empty preferences page into three small choices you can see, with this no preferences empty state for Svelte with Ark UI. It's the first-run page of Tiltrow, a settings app: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. At the start of the band sit the heading, one sentence, three Switches (Compact view, Weekly digest and Auto-save drafts) under a Badge that reads "All defaults" and, as switches are flipped, "1 changed" or "2 changed", and the Shine Button, the only colored control, that saves them. At the end a greyscale mixing panel with three faders stands where a product's mark would: each knob sits at the end its switch says, slides to the other end when the switch is flipped and leaves a dashed outline where its default is. The rails and band come from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Save preferences, and what stays in the page?
The switches' values are kept in the page's state as the saved ones, and the status line says "Preferences saved in this page only." Nothing goes to an account or a server; reload and the defaults are back. To wire it for real, send the three values to your API where the code says so and read them back on load.
What do the badge and Reset count?
The badge counts switches that differ from their defaults (Compact view off, Weekly digest on, Auto-save drafts on). Reset puts every switch back to its default. Saving is counted separately: the status line says how many changes are not saved yet, and Save with nothing new answers "No changes to save."
Do the faders do anything?
They are a drawing that mirrors the switches: a knob at the top is on, a knob at the bottom is off, and the dashed outline marks each default. The drawing is hidden from assistive technology; the switches, the badge and the status line carry the same information. The knobs slide with a CSS transition that is off under reduced motion.