shadcn.io is not affiliated with official shadcn/ui
Switch Toggle Sidebar Block for Svelte
A writing app in a fixed-height window whose sidebar holds four preference switches, each changing the page: a saved chip, tighter section rows, a Public word in the top bar and a security line.
Installation
Overview
Put a few on-off preferences in the rail where you can see what they do with this switch toggle sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar with four Switch rows: Auto-save, Compact rows, Public profile and Two-factor. Every switch changes the page beside it. Auto-save flips the draft's chip between Saved and Unsaved changes, Compact rows cuts the six sections of the draft down to titles, Public profile changes the word in the top bar between Public and Only you, and Two-factor flips a security line between on and off. A count in the bar and the status line say how many are on ("3 of 4 on"), and the status line also says what each switch just did, which is how a phone reader sees the result while the rail is closed. Folded to icons each row becomes an icon button that toggles the same preference, pressed when it is on, with a tooltip that says "Auto-save: on". Switches are neutral, never a color. It's built from Sidebar, Switch, Badge and Guides, with a CSS entrance only. For editors, settings in a rail and any app where a preference should show its effect.
FAQ
What does each switch change?
Auto-save: the chip under the top bar reads Saved with a check when it is on and Unsaved changes with a dot when it is off. Compact rows: the section list drops each section's line of text and tightens its padding. Public profile: the badge in the top bar reads Public or Only you. Two-factor: the line at the top of the draft says whether two-factor sign-in is on, with a shield or a crossed shield. Each state is a glyph and a word, never a hue, and none of them saves or signs anything.
How do the switches work when the sidebar is folded?
A folded rail has room for icons only, so each preference shows as an icon button with the preference's icon. Pressing it toggles the same state as the switch, it reads as pressed when the preference is on, and its tooltip says "Compact rows: off" or "on". Unfold the rail and the same four preferences are switches again. The two forms share one state, so nothing is lost by folding.
What stays in the page, and how do I connect it?
Everything. The draft's sections are typed at the top of the file and the four preferences are the block's own state; no switch saves, publishes or turns on a real two-factor setup. Replace flip with a call to your API, and for two-factor start your enrollment flow instead of flipping a line. Keep the rail's job as it is: the switch changes the setting and the page shows the effect.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet opened by the menu button in the top bar. The switches are inside it and change the page behind as you flip them; close the sheet and the chip, the badge, the rows and the security line are already updated, and the status line says what changed. The window keeps its height.
Is it accessible?
Each switch is named after its preference and reports on or off. The folded buttons report pressed or not and keep the same names. The preferences sit in a navigation-style group labeled Preferences inside a landmark named after the product, and one polite status line announces the effect and the count after every change. The draft is a scrollable region you can reach with Tab.