shadcn.io is not affiliated with official shadcn/ui
No Preferences Empty State Block for React
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 React with Base 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.
Related
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.
- Pro
Appearance Settings
Appearance and localeAn appearance settings panel that previews instead of applying: a drawn app window that wears the choices, theme and contrast cards with a drawn thumbnail each, a text-size slider with a sample sentence and a reduce motion switch with a replay.
- Pro
First Project Empty State
First runA full-height first-run screen for a weekly planner: a name field and one Create project button at the start, and at the end a drawn drafting table whose blank sheet is only dashed until the project exists.
- Pro
No Roles Empty State
Team and accessAn access-management tool's first-role page: a name field, five permission switches, a sentence that rewrites itself, and a key ring whose next free tag is dashed and shows the role you are building.
- Pro
No Permissions Empty State
Team and accessAn access-control tool's empty rules page: a preset strip over a real matrix of checkboxes (Projects, Docs and Billing by Create, Read, Update and Delete), a count, a Save rules foot, and a garden gate that opens as you allow more.
- Pro
Centered Sign In Login
Centered formA full-height sign-in page for a team chat app: the product's mark, Google and GitHub rows with lettermark tiles, an or rule, email and password checked on submit, and one Sign in button with a simulated wait and its result.