2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tb42,"use client"; import { Switch as SwitchPrimitive } from "radix-ui"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; const SIZES = { sm: { track: "h-4 w-[22px]", thumb: "size-3 data-[state=checked]:translate-x-1.5 group-active/switch:w-3.5 group-active/switch:data-[state=checked]:translate-x-1", squircle: ["rounded-[5px]", "rounded-[3px]"], }, md: { track: "h-5 w-7", thumb: "size-4 data-[state=checked]:translate-x-2 group-active/switch:w-[18px] group-active/switch:data-[state=checked]:translate-x-1.5", squircle: ["rounded-[7px]", "rounded-[5px]"], }, lg: { track: "h-6 w-9", thumb: "size-5 data-[state=checked]:translate-x-3 group-active/switch:w-[22px] group-active/switch:data-[state=checked]:translate-x-2.5", squircle: ["rounded-[8px]", "rounded-[6px]"], }, } as const; const TONES = { neutral: "data-[state=checked]:bg-neutral-950 dark:data-[state=checked]:bg-white", emerald: "data-[state=checked]:bg-emerald-500 dark:data-[state=checked]:bg-emerald-500", blue: "data-[state=checked]:bg-blue-600 dark:data-[state=checked]:bg-blue-500", } as const; export interface SwitchProps extends ComponentProps { size?: keyof typeof SIZES; /** Track color when on. */ tone?: keyof typeof TONES; /** pill (default) or squircle: soft square corners on the track and thumb. */ shape?: "pill" | "squircle"; } export function Switch({ size = "md", tone = "neutral", shape = "pill", className, ...props }: SwitchProps) { const s = SIZES[size]; return ( ); } export default Switch; 2e:T4912,

"use client";

import { Switch as SwitchPrimitive } from "radix-ui";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

const SIZES = {
  sm: {
    track: "h-4 w-[22px]",
    thumb: "size-3 data-[state=checked]:translate-x-1.5 group-active/switch:w-3.5 group-active/switch:data-[state=checked]:translate-x-1",
    squircle: ["rounded-[5px]", "rounded-[3px]"],
  },
  md: {
    track: "h-5 w-7",
    thumb: "size-4 data-[state=checked]:translate-x-2 group-active/switch:w-[18px] group-active/switch:data-[state=checked]:translate-x-1.5",
    squircle: ["rounded-[7px]", "rounded-[5px]"],
  },
  lg: {
    track: "h-6 w-9",
    thumb: "size-5 data-[state=checked]:translate-x-3 group-active/switch:w-[22px] group-active/switch:data-[state=checked]:translate-x-2.5",
    squircle: ["rounded-[8px]", "rounded-[6px]"],
  },
} as const;

const TONES = {
  neutral: "data-[state=checked]:bg-neutral-950 dark:data-[state=checked]:bg-white",
  emerald: "data-[state=checked]:bg-emerald-500 dark:data-[state=checked]:bg-emerald-500",
  blue: "data-[state=checked]:bg-blue-600 dark:data-[state=checked]:bg-blue-500",
} as const;

export interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root> {
  size?: keyof typeof SIZES;
  /** Track color when on. */
  tone?: keyof typeof TONES;
  /** pill (default) or squircle: soft square corners on the track and thumb. */
  shape?: "pill" | "squircle";
}

export function Switch({ size = "md", tone = "neutral", shape = "pill", className, ...props }: SwitchProps) {
  const s = SIZES[size];
  return (
    <SwitchPrimitive.Root
      className={cn(
        "group/switch peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors duration-200",
        "bg-neutral-950/[0.14] shadow-[inset_0_1px_2px_rgb(0_0_0/0.08)] hover:bg-neutral-950/[0.2] dark:bg-white/[0.16] dark:hover:bg-white/[0.22]",
        "focus-visible:shadow-[0_0_0_3px_rgb(0_0_0/0.1)] dark:focus-visible:shadow-[0_0_0_3px_rgb(255_255_255/0.15)]",
        "disabled:cursor-not-allowed disabled:opacity-50",
        TONES[tone],
        s.track,
        shape === "squircle" && s.squircle[0],
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        className={cn(
          "pointer-events-none block rounded-full bg-white text-neutral-500 shadow-[0_1px_3px_rgb(0_0_0/0.2),0_0_0_0.5px_rgb(0_0_0/0.04)]",
          "transition-[translate,width] duration-300 ease-[cubic-bezier(0.34,1.36,0.64,1)]",
          "dark:data-[state=checked]:bg-neutral-950 dark:data-[state=checked]:text-neutral-300",
          tone !== "neutral" && "dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-neutral-500",
          s.thumb,
          shape === "squircle" && s.squircle[1],
        )}
      />
    </SwitchPrimitive.Root>
  );
}

export default Switch;

2f:T4bb,import { Switch } from "@/components/scalar-ui/switch"; const settings = [ { id: "previews", title: "Branch previews", body: "Deploy every pull request to its own URL.", on: true }, { id: "comments", title: "Preview comments", body: "Let reviewers leave comments on previews.", on: true }, { id: "protection", title: "Password protection", body: "Ask for a password before showing a preview.", on: false }, ]; export default function Demo() { return (

{settings.map((s) => (

{s.title} {s.body}

))}

); } 30:T28e4,

import { Switch } from "@/components/scalar-ui/switch";

const settings = [
  { id: "previews", title: "Branch previews", body: "Deploy every pull request to its own URL.", on: true },
  { id: "comments", title: "Preview comments", body: "Let reviewers leave comments on previews.", on: true },
  { id: "protection", title: "Password protection", body: "Ask for a password before showing a preview.", on: false },
];

export default function Demo() {
  return (
    <div className="w-full max-w-[420px] divide-y divide-black/[0.06] rounded-[22px] bg-white px-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:divide-white/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      {settings.map((s) => (
        <div key={s.id} className="flex items-center justify-between gap-6 py-4">
          <label htmlFor={s.id} className="cursor-pointer">
            <span className="block text-[13.5px] font-medium text-neutral-950 dark:text-white">{s.title}</span>
            <span className="block text-[12.5px] text-neutral-500 dark:text-neutral-400">{s.body}</span>
          </label>
          <Switch id={s.id} defaultChecked={s.on} />
        </div>
      ))}
    </div>
  );
}

31:Te49,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <div className="flex items-center gap-2.5">
      <Switch id="airplane" />
      <label htmlFor="airplane" className="text-[13.5px] font-medium text-neutral-900 dark:text-neutral-100">
        Airplane mode
      </label>
    </div>
  );
}

32:T1029,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Switch size="sm" defaultChecked aria-label="Small" />
      <Switch defaultChecked aria-label="Medium" />
      <Switch size="lg" defaultChecked aria-label="Large" />
    </div>
  );
}

33:T16eb,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Switch shape="squircle" size="sm" defaultChecked aria-label="Small squircle" />
      <Switch shape="squircle" defaultChecked aria-label="Medium squircle" />
      <Switch shape="squircle" size="lg" defaultChecked aria-label="Large squircle" />
      <Switch shape="squircle" size="lg" tone="emerald" aria-label="Squircle off" />
    </div>
  );
}

34:T1032,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Switch defaultChecked aria-label="Neutral" />
      <Switch tone="emerald" defaultChecked aria-label="Emerald" />
      <Switch tone="blue" defaultChecked aria-label="Blue" />
    </div>
  );
}

35:T455,import { Switch } from "@/components/scalar-ui/switch"; export default function Example() { return ( ); } 36:T2691,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <form className="w-full max-w-[360px] space-y-4">
      <div className="flex items-start gap-3">
        <Switch id="marketing" size="sm" className="mt-0.5" />
        <label htmlFor="marketing" className="cursor-pointer">
          <span className="block text-[13.5px] font-medium text-neutral-900 dark:text-neutral-100">Product updates</span>
          <span className="block text-[12.5px] text-neutral-500 dark:text-neutral-400">A short email when we ship something new.</span>
        </label>
      </div>
      <div className="flex items-start gap-3">
        <Switch id="security" size="sm" defaultChecked className="mt-0.5" />
        <label htmlFor="security" className="cursor-pointer">
          <span className="block text-[13.5px] font-medium text-neutral-900 dark:text-neutral-100">Security alerts</span>
          <span className="block text-[12.5px] text-neutral-500 dark:text-neutral-400">New sign-ins and changes to your keys.</span>
        </label>
      </div>
    </form>
  );
}

37:T1f56,

import { Switch } from "@/components/scalar-ui/switch";

export default function Example() {
  return (
    <div className="space-y-3">
      {[
        ["off", false],
        ["on", true],
      ].map(([id, on]) => (
        <div key={String(id)} className="flex items-center gap-2.5">
          <Switch id={`disabled-${id}`} disabled defaultChecked={Boolean(on)} />
          <label htmlFor={`disabled-${id}`} className="text-[13.5px] font-medium text-neutral-900 opacity-50 dark:text-neutral-100">
            Locked {on ? "on" : "off"} by your admin
          </label>
        </div>
      ))}
    </div>
  );
}

29:["$","section","switch",{"id":"switch","aria-labelledby":"switch-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"switch-title","className":"sr-only","children":"Switch"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"switch","gated":{"unlocked":true,"files":[{"name":"switch.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { Switch } from \"@/components/scalar-ui/switch\";\n\nexport default function Example() {\n return (\n

\n \n \n Airplane mode\n \n

\n );\n}\n","html":"$31"},"size":{"name":"size.tsx","code":"import { Switch } from \"@/components/scalar-ui/switch\";\n\nexport default function Example() {\n return (\n

\n \n \n \n

\n );\n}\n","html":"$32"},"squircle":{"name":"squircle.tsx","code":"import { Switch } from \"@/components/scalar-ui/switch\";\n\nexport default function Example() {\n return (\n

\n \n \n \n \n

\n );\n}\n","html":"$33"},"tones":{"name":"tones.tsx","code":"import { Switch } from \"@/components/scalar-ui/switch\";\n\nexport default function Example() {\n return (\n

\n \n \n \n

\n );\n}\n","html":"$34"},"in-a-form":{"name":"in-a-form.tsx","code":"$35","html":"$36"},"disabled":{"name":"disabled.tsx","code":"import { Switch } from \"@/components/scalar-ui/switch\";\n\nexport default function Example() {\n return (\n

\n {[\n [\"off\", false],\n [\"on\", true],\n ].map(([id, on]) => (\n

\n \n \n Locked {on ? \"on\" : \"off\"} by your admin\n \n

\n ))}\n

\n );\n}\n","html":"$37"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add switch","shadcn":"npx shadcn@latest add https://scalarui.com/r/switch.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L38","toolbar":"$L39"}]}],["$L3a","$L3b","$L3c","$L3d","$L3e","$L3f"]]}]

Switches

Switches

Default

Size

Squircle

Tones

In a Form

Disabled