About
An on/off toggle control styled as a switch, with label, description and error text, for settings that take effect immediately.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Switch to your project and fits it to your theme.
Code
How Switch is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Switch } from "@/components/ui/switch";
export default function SwitchDemo() {
return (
<div
className="flex w-full h-full flex-col gap-6 p-10"
style={{
background: "var(--color-surface-base)",
color: "var(--color-text-default)",
}}
>
<Switch label="Dark scheme" defaultChecked />
<Switch
label="Email notifications"
description="Follows the system when off."
/>
<Switch label="Two-factor authentication" error="Unavailable" />
<Switch label="Beta features" disabled defaultChecked />
</div>
);
}
More by pearpages
View all
Popover
4
Slider
More in Forms
View all
Premium Auth
534
Contact Card
1K
Book A Demo 1
78
Card Studio
44
Login 2
9
Login Card
29
Split Sign In Form
78
SignInPage
689
