Skip to content
SevenUI
Sign in

Switch components

14 free, copy-and-go React Switch examples built on the SevenUI Switch primitive. Install any of them with the shadcn CLI.

Read the docsBrowse Pro blocksShare on X (opens in a new tab)
On this page

Labeled switch

A single switch with a label and a muted helper line for a marketing email opt-in.

… add @sevenui/component/switch-01
Get occasional updates about new features and offers.

Settings list

A bordered list of device settings, each row pairing a label and description with a switch.

… add @sevenui/component/switch-02
Connect to available wireless networks automatically.
Allow this device to pair with nearby accessories.
Share your location with apps that request it.

Form submission

Uncontrolled house-rule switches with name, value and uncheckedValue that post yes or no, with a preview of the submitted form data.

… add @sevenui/component/switch-03

House rules

Loft on Alder Street · 2 guests

Guests who meet your requirements can book without a request.
Up to two pets. A $40 cleaning fee is added per stay.
Guests get the lockbox code 24 hours before arrival.
Save to see the values this form sends.

Compact density

A dense editor View menu of small switches on full-row labels with keyboard shortcut hints.

… add @sevenui/component/switch-04

View

Flanking icons

Controlled switches framed by off and on icons that highlight the side matching the current state.

… add @sevenui/component/switch-05

Map layers

A token-drawn map preview whose traffic, transit, bike lane and saved place layers fade in and out with color-keyed switches.

… add @sevenui/component/switch-06

Map layers

3 of 4 shown
  • Updated 2 min ago
  • Metro and tram
  • Protected lanes only
  • 4 pins in view

Test mode

A payments panel where a warning-tinted Test mode switch swaps in test data and keys and shows a status banner.

… add @sevenui/component/switch-07
Showing live data.

Payments

Last 7 days · $48,210.90

  • Harbor Coffee Co.Succeeded
    $1,240.00
  • Lumen StudioSucceeded
    $89.00
  • Oakline DentalRefunded
    $410.50
Publishable keypk_live_51Nw…Qe8R

Master switch

A Back up photos switch that pauses its child options without losing them, with a status badge.

… add @sevenui/component/switch-08
13 left
2,418 of 2,431 photos and videos are backed up.

Read-only rules

Branch protection rules where org-enforced switches are read-only with a lock tooltip, next to one editable rule.

… add @sevenui/component/switch-09

Branch protection

Rules for main in northwind/storefront

At least one approval before merging into main.Required by the Northwind organization ruleset. Ask an org owner to change it.
Anyone with write access can rewrite main's history.Blocked by the Northwind organization ruleset. Ask an org owner to change it.
Remove the source branch after a pull request merges.

Minimum one enabled

Two-step verification methods where turning off the last enabled method is refused with an inline error.

… add @sevenui/component/switch-10

Two-step verification

1 method on. Keep a backup in case you lose your phone.

  • Default
    Added March 4 · 1Password
  • YubiKey 5C NFC
  • Codes sent to •••• 0142
8 of 10 recovery codes left

Table row toggles

A webhook endpoints table with an Enabled switch per row, a failing endpoint paused, and a live active count.

… add @sevenui/component/switch-11

Webhook endpoints

2 of 3 endpoints receiving events

EndpointEnabled
api.harborcoffee.com/hooks/ordersorder.created, order.paidHealthy200 · 4 min ago
hooks.pipeline.io/t/9f2c1customer.updatedFailingPaused after 5 × 503
hooks.slack.com/services/T04…refund.createdHealthy200 · Yesterday

Field visibility

Public profile fields with small Public switches that update a live preview of what others see.

… add @sevenui/component/switch-12

Public profile

Choose what people outside your team see.

Preview of your public profile
AM
Ava Moreno@avamoreno
  • Product designer at Northwind
  • Lisbon, Portugal
  • CompanyProduct designer at Northwind
  • LocationLisbon, Portugal
  • Emailava.moreno@northwind.app
  • Phone+351 912 408 331

Share link settings

A file share panel where a public-link switch reveals a copyable URL plus download, expiry and password options.

… add @sevenui/component/switch-13

Share “Q3 board deck.pdf”

4.2 MB · Edited by Maya Chen

Anyone who has the link can view this file.

Confirm before turning off

A feature flag console with environment tabs and search, where turning a production flag off asks for confirmation first.

… add @sevenui/component/switch-14

Feature flags

3 of 5 on

  • Single-page checkout with saved payment methods.

    PaymentsUpdated 2h ago

  • Suggest replies in the support inbox composer.

    SupportUpdated Yesterday

  • Meter API calls and bill overages at month end.

    BillingUpdated 3 days ago

  • Send transactional emails with a dark color scheme.

    GrowthUpdated Sep 12

  • Keep the v1 CSV export endpoint available.

    PlatformUpdated Aug 30

Components are the parts. Blocks are the page.

Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.

Browse blocksGet Pro — $99

One purchase, yours forever. $99 at launch instead of $249.