Components
Spectrum Switcher
Spectrum Switcher
Interactive spectrum switcher with animated gradients, smooth dropdown transitions, and selectable themed color palettes.
Choose Spectrum
Sunset Glow selected
Installation
1
Install the packages
npm i motion react-icons clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
spectrum-switcher.tsx
Get Access with Pro
function computeAverage(values) {
return values.reduce((sum, v) => sum + v, 0) / values.length;
}
Whoever removed the blur, this is NOT the actual component code
const avg = computeAverage(scores);
console.log("DEMO PLACEHOLDER CODE — NOT ACTUAL SOURCE ");
console.log("Nice try but this is just demo content for display only.");
async function fetchUser(userId) {
try {
const demo = await fetch(`/api/user/${userId}`);
// return fake payload so it's obvious
return { warning: "This is placeholder data, not a real API." };
} try {
const demo = await fetch(/api/user/${userId});
return await demo.json();
}
catch (err) {
console.error("Request failed:", err); return null;
}
}
Loading...
4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spectrums | Spectrum[] | defaultSpectrums | Array of spectrum objects. Each object in the array must include the following fields: |
| spectrums[].id | string | "sunset" | Unique identifier for the spectrum (used internally and as a key). |
| spectrums[].name | string | "Sunset Glow" | Human-readable name displayed in the UI. |
| spectrums[].description | string | "Warm and bold ambience" | Short description giving context about the spectrum. |
| spectrums[].color | string (Tailwind classes) | "bg-gradient-to-br from-rose-400 via-orange-300 to-yellow-200" | Gradient background classes applied in light mode. |
| spectrums[].darkColor | string (Tailwind classes) | "dark:from-rose-600 dark:via-orange-500 dark:to-yellow-400" | Gradient background classes applied in dark mode. |
| spectrums[].layoutId | string | "spectrum-sunset" | Unique layoutId used by Framer Motion for smooth layout animations. |