Radio tuner
FM radio tuner where static thins out near a station, a waveform appears and the name resolves on lock; release nearby springs onto it.
Installation
pnpm dlx shadcn@latest add @lumesec/px-tunerFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-tuner.jsonUsage
import { PxTuner } from "@/components/lumesec/px-tuner";
export function Example() {
return (
<PxTuner />
);
}Behaviour
Drag the band to tune. Static thins out as you near a station, a waveform appears, and the station name resolves when it locks. Let go nearby and it springs onto the frequency.
API reference
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
lockReact proponLockDetail{ station: string, frequency: number }Fires each time the dial locks onto a station, with its name and frequency in MHz.
Keyboard
| Keys | Action |
|---|---|
| ArrowLeft / ArrowRight | Tune down or up by 0.1 MHz, then spring onto a station within 0.6 MHz. |
| PageUp / PageDown | Jump to the next or previous station, wrapping around. |
Accessibility
- The canvas is focusable with
role="slider",aria-label="Radio frequency",aria-valuemin="87.5"andaria-valuemax="108". aria-valuenowis the frequency;aria-valuetextadds the station name when locked.- The status text ("Searching…" or "Locked · <station>") is an
aria-live="polite"region. - Reduced motion: the dial jumps onto a station instead of springing and the static stops flickering; the waveform still moves.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg, --ui-mono and --ui-muted.
Notes
- The stations are built-in demo data: 89.3 LOFI BEATS, 94.7 NEWS 24, 101.1 OPUS FM and 105.5 DEEP CUTS. The band runs from 87.5 to 108 MHz and the dial starts at 97.6.
- No audio plays. The host has a
data-lockedattribute while a station is locked; the station name fades in on the screen in the page font. - The canvas is 176px tall and animates continuously while on screen.
Related
Was this page helpful?