Email Notifications

); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Switch"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SwitchStyleDefault"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"flex items-center space-x-2"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"notification"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"notification"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">Email Notifications"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(c,{children:[(0,e.jsx)(c.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/switch.json'"}),(0,e.jsxs)(c.Manual,{children:[(0,e.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,e.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-switch"})]})})})}),(0,e.jsx)("br",{}),(0,e.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,e.jsx)(t,{name:"switch",children:(0,e.jsx)(l.figure,{__src__:"/vercel/path0/components/retroui/Switch.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-switch"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" Switch"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" SwitchPrimitives"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SwitchProps"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SwitchPrimitives.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SwitchPrimitives.Thumb"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"pointer-events-none block h-4 w-4 bg-primary border-2 mx-0.5 border-foreground ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Switch };"})]})]})})})})]})]}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,e.jsx)(l.h3,{id:"default",children:"Default"}),` `,(0,e.jsx)(r,{name:"switch-style-default",children:(0,e.jsx)(l.figure,{__src__:"preview/components/switch-style-default.tsx",__rawString__:`import { Switch } from "@/components/retroui/Switch"; import React from "react"; export default function SwitchStyleDefault() { return (

Email Notifications

Switch

Installation

Examples

Default

Disabled