Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026A 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.0"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.
'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