Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Music blocks

Pro

Radio Station Music Block for React

A radio dial from 88 to 108 MHz with five station ticks, a tuning slider that snaps to a station, a group of presets, and a side cell with what is on now, the next three slots and the listener count.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people tune a station instead of picking from a list, with this radio dial for React with Base UI. It shows Beaconfield, a community radio network, in a hairline frame with a plus mark on each corner: the tuned frequency in large type, a dial scale from 88 to 108 MHz with a tick for each of five stations and a needle, and a Slider under it that moves in steps of 0.1. Within 0.1 of a station the reading snaps to it and names it; between stations the dial is hatched and says so. A Toggle Group of five presets moves the slider, and a side cell shows the station's now playing, its next three slots on a Friday evening and its listener count, with a Listening Toggle that starts three pulsing bars. Between stations the cell becomes an Empty state at the same height. On a phone the presets scroll sideways and the cell stacks under the dial. It's built from Slider, Toggle Group, Toggle, Empty and Guides, with a CSS entrance only. For radio, podcast and live-audio apps.

FAQ

How do I add my own stations?

Edit STATIONS. Each station has an id, a name, its frequency in tenths of a megahertz (964 is 96.4, so no decimal ever has to be added up), a now entry with the title, artist, position and length, three next slots with their times, and a listener count. The scale, the ticks, the preset buttons and the snap are all drawn from that list, and LOW and HIGH set the ends of the dial.

How does snapping work?

When the slider lands within one tenth of a station it moves to that station's exact frequency, the figure shows it, the station is named and the preset for it is pressed. Pressing an arrow key on a station steps past it, two tenths at a time, so you can leave it. Anywhere else the figure shows the reading, the dial is hatched, the presets are all off and the side cell says it is between stations. The slider's value text says the same in words for a screen reader, for example "96.4 megahertz, Beaconfield Jazz".

Is anything broadcast, and what stays local?

No. The block says so: no audio plays in this demo. The schedule, the titles and the listener counts are typed data, and Listening only starts the bars. To make it real, load the stations and their schedules from your API, play a stream URL when a station is tuned, and update the now playing and the count on an interval or from a socket.

How do I tune it from the keyboard?

Focus the slider and use the arrow keys for steps of 0.1, Page Up and Page Down for larger steps, and Home and End for the ends of the dial. The dial and its slider stay left to right in a right-to-left page, because a frequency scale reads from low to high. The presets are a group of toggle buttons: Tab to the group, move with the arrow keys and press one to jump. A polite status line announces the station when you land on one.

What moves, and what happens with reduced motion?

The needle follows the slider, the hatch fades in and out between stations, and the three bars pulse while Listening is on. Under reduced motion the fade is instant and the bars stay still. Nothing else loops.

How does it look on a phone?

The dial takes the full width, the presets scroll sideways in their own row with the focus ring kept inside it, and the side cell stacks under the dial with its own top rule. The cell keeps one height whether a station is tuned or not, so tuning never moves the page.

All 100 music blocks