Preset Keys

Component 4

About

A skeuomorphic radio-group of vintage radio station preset buttons that latch down with a solid clack while a needle sweeps across a lit FM dial to the selected station.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Preset Keys to your project and fits it to your theme.

Code

How Preset Keys is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import PresetKeys from "@/components/ui/preset-keys";

const STATIONS = [
  { name: "Classic FM", short: "Classic", mhz: 90.4 },
  { name: "Al Wisal", short: "Wisal", mhz: 96.5 },
  { name: "Coast FM", short: "Coast", mhz: 99.1 },
  { name: "Hala FM", short: "Hala", mhz: 102.7 },
  { name: "Merge", short: "Merge", mhz: 104.8 },
];

export default function Demo() {
  return (
    <div
      className="flex min-h-screen w-full items-center justify-center px-4 py-12"
      style={{ background: "#e6dccb" }}
    >
      <PresetKeys stations={STATIONS} defaultIndex={3} theme="walnut" />
    </div>
  );
}