Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Toggle Switch Control Panel Features Block for Svelte

A notification matrix for an alerting product: five events by four channels, every cell a working Switch, a counter that rolls as you flip them and a footer that offers Save and Discard in reserved space.

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

A control panel for Svelte with Ark UI. A centred header sits over a framed panel: a bar with the title and a counter that reads how many of the twenty switches are on, rolling as you flip them, then the matrix itself, five events (deploy failed, error spike, certificate expiring, quota at 80%, member joined) by four channels (email, chat, SMS, push), every cell a real Switch named for both, such as "Deploy failed by SMS". A footer of reserved height says what to do until something changes, then shows "Unsaved changes" with Discard and a Save button in the same space. From md the matrix is a table; on a phone each event is a card with its four switches in two rows of two. It's built from Switch, Table, Sliding Number, Status, Shine Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For products where who gets told, and how, is the product.

FAQ

How do I change the events and channels?

Edit EVENTS and CHANNELS at the top of the file. Each event lists the channels it starts on in defaults, and the counter, the total and the unsaved-changes count are all worked out from the list of switches that are on.

What do Save and Discard do?

Nothing leaves the page: Save makes the current switches the saved state and shows a confirmation, Discard puts them back to the saved state. Connect save to your own request. Until a switch changes, the footer shows a hint instead; the buttons are inert and invisible then.

Does the footer move the page when it changes?

No. The hint and the Save row sit in one grid cell, so the footer is always as tall as the taller of the two. A polite status line, hidden visually, announces the number of unsaved changes and the save.

How is each switch named?

Each Switch has an aria-label made of the event and the channel, "Deploy failed by SMS", so it is clear out of context. The table has a row header for each event and a column header for each channel. The Switch is controlled through its checked state and change handler.

How does it fit on a phone?

Below md the table is replaced by one card per event with the four channels in two rows of two, each with its own switch and name. The two layouts share one state, so a change in one is a change in the other.

All 170 features blocks