How to Add a Switch to a React App

Before installing Switch, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory — the component ships as a .tsx file, so TypeScript is part of the stack. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. The Switch has no third-party import at all past React and the local cn utility — there is no icon package to add, because the sliding thumb is a plain <span>. The one detail worth knowing before you render it is that the Switch is a Client Component: it renders a <button> with an onClick handler, so its source opens with a 'use client' directive and must render inside a client boundary rather than straight in a Server Component.

Run the CLI from your project root to add the Switch source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single switch.tsx — no other files, because the component's only dependency past React is the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits — the whole control, from the role="switch" button to the styling object, is one file you can read top to bottom.

Import Switch and render it inside a Client Component. The Switch is controlled-only, so you always hold the checked boolean yourself and hand it back through onChange — there is no uncontrolled mode and no defaultChecked. The smallest working shape owns the value in useState and passes it straight down; onChange fires with the next boolean, so wiring it to the setter is a one-liner. The example below is a 'use client' file that toggles a single boolean. Because the file opens with 'use client', drop this into a client component or a page already inside a client boundary; the Next.js Switch guide covers importing it into a Server Component page. Under the hood the track swaps from bg-border to bg-primary and the thumb slides across — no animation library involved.

Since the Switch keeps no internal state, the checked boolean always lives in your component — which makes it easy to react the moment it flips. Pass a setter to onChange and you can persist the value, fire a side effect, or mirror the state in another element. The onChange callback receives the next value directly — a plain boolean, not a DOM event — so onChange={(next) => ...} gives you the new state without reading it off the DOM. The example toggles a notifications preference and echoes the current state in a caption beside the control. Because the value is yours, a form, a reset button, or a server-loaded default can read and set the same boolean. For more copy-paste patterns see the Switch examples.

A switch rarely stands alone — it sits in a settings row with a label describing what it toggles. Pair it with the Drivn Label and lay the two out in a flex row: the label and a short helper line on the left, the Switch pushed to the trailing edge with justify-between. Because the Switch is a real <button> with role="switch" and aria-checked, screen readers announce it as a switch and read its on/off state with no extra ARIA from you. Wrap the row in a Card to group several toggles into a preferences panel, each with its own boolean in state. Everything visible is a Tailwind class in the styles object inside the file you own, so recoloring the checked track — bg-primary to bg-success for a confirm-style toggle — is a one-line edit; see Theming for the tokens. The example renders a labelled row with a title, a helper line, and the Switch aligned right.