shadcn.io is not affiliated with official shadcn/ui
Toggle Switch Control Panel Features Block for React
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.
Installation
Overview
A control panel for React with Base 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 with checked and onCheckedChange, which gives the new value directly.
Related
- Pro
Toggle Grid Checkered Mode Switch Features
Proof and comparisonsA Managed or Self-hosted switch that flips six capability cells at once: each swaps its sentence and ticks, rolls its metric to the other mode's figure and shows by how much that mode leads or trails, on a checkered grid.
- Pro
Inset Border Card Grid Features
Live controlsSix ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
- Pro
Usage Alerts Billing
Plan and usageUsage alert settings: percentage thresholds as switches with number inputs, recipients as email chips, and a choice between email and a webhook, with a save that checks them.
- Pro
Keyboard Focus Grid Features
Live controlsA six-cell feature grid for a keyboard-first notes app: one focus ring glides between cells with the arrow keys, and Enter or a tap writes the cell's detail into a strip under the grid.
- Pro
Vertical Slider Board Features
Live controlsA board of six vertical sliders for an alert-tuning tool, each with a level meter and a readout, and a composite readout of pages a week and incidents caught worked out from the six settings.