Card

Header, content, footer — a bordered box with good spacing defaults, shown here wrapping real zero-JS switches.

plain CSS — works everywhere

PreviewCode

<div class="w-full max-w-sm rounded-xl border border-border bg-card text-card-foreground shadow-sm">
  <div class="p-6 pb-4">
    <h3 class="font-semibold tracking-tight">Notifications</h3>
    <p class="mt-0.5 text-sm text-muted-foreground">Choose what you want to hear about.</p>
  </div>
  <div class="grid gap-3 px-6">
    <label class="flex cursor-pointer items-center justify-between gap-2.5 text-sm font-medium">
      Product updates
      <input
        type="checkbox"
        checked
        class="relative h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-input transition-colors checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring before:absolute before:top-0.5 before:left-0.5 before:size-4 before:rounded-full before:bg-background before:shadow-sm before:transition-transform before:content-[''] checked:before:translate-x-4"
      />
    </label>
    <label class="flex cursor-pointer items-center justify-between gap-2.5 text-sm font-medium">
      Weekly digest
      <input
        type="checkbox"
        class="relative h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-input transition-colors checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring before:absolute before:top-0.5 before:left-0.5 before:size-4 before:rounded-full before:bg-background before:shadow-sm before:transition-transform before:content-[''] checked:before:translate-x-4"
      />
    </label>
  </div>
  <div class="p-6 pt-5">
    <button class="inline-flex h-9 w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium whitespace-nowrap text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
      Save preferences
    </button>
  </div>
</div>

How it works

Three stacked sections with p-6 and trimmed inner edges — no dedicated CardHeader/CardContent components, just padding.
The settings rows are the Switch component verbatim, with justify-between to push the toggle to the edge — composition is copy-paste here.
Use semantic headings (h3 or whatever fits your page outline) — the card doesn’t care.