Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026← Back to your resultsv1.0.1 · Current release v1.0.0
A small switch. A different feeling.
Free · MIT license
Palette Switch
Small interaction. A completely different feeling.
- Styling
- inline CSS
- Delivery
- Reusable React component
Add it to your project
pnpm dlx shadcn@latest add "https://designmyui.dev/r/palette-switch?version=1.0.1"Uses React and inline CSS. No additional runtime libraries. Installation guide ↗
♡ Save to favorites
Free source is public. Sign in to keep this version in your library.
Source & usage
The source below is checked against this release’s published SHA-256 hash before delivery. Copy the file or use the registry.
/**
* Copyright (c) 2026 DesignMyUI
* SPDX-License-Identifier: MIT
*/
"use client";
export function PaletteSwitch({
checked,
onChange,
label = "Switch color palette",
warm = false,
}: {
checked: boolean;
onChange: (value: boolean) => void;
label?: string;
warm?: boolean;
}) {
return (
<button
type="button"
role="switch"
aria-checked={checked}
aria-label={label}
onClick={() => onChange(!checked)}
style={{
position: "relative",
width: 65,
height: 36,
padding: 4,
border: 0,
borderRadius: 99,
cursor: "pointer",
background: warm
? "linear-gradient(120deg,#f2a4ce,#c591e9,#f4c68d)"
: "linear-gradient(120deg,#99c4ef,#b788ea,#eea3bd)",
boxShadow: "inset 0 1px 3px #46424c30, 0 1px 1px #ffffff",
verticalAlign: "middle",
flexShrink: 0,
}}
>
<span
style={{
display: "block",
width: 28,
height: 28,
borderRadius: "50%",
background: "linear-gradient(145deg,#fff,#f5f3f8)",
boxShadow: "0 2px 4px #57436b40",
transform: `translateX(${checked ? 29 : 0}px)`,
transition: "transform 180ms ease",
}}
/>
</button>
);
}
Use it in your interface
Interactive handlers belong in a React client component. Replace the content and props with your own.
"use client";
import { useState } from "react";
import { PaletteSwitch } from "./palette-switch";
export function ThemeControl() {
const [checked, setChecked] = useState(true);
return <PaletteSwitch checked={checked} onChange={setChecked} label="Switch color palette" />;
}Published versions
Each download keeps its original source. Choose a release to inspect and download that exact version.
Initial published source.
Published Oct 11, 2026