Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Music blocks

Pro

Sheet Viewer Music Block for Radix UI

A score viewer that draws an eight-measure tune on a staff in two pages of two systems; an instrument select rewrites it for piano, violin, clarinet in B flat (a major second up, two sharps) or cello (bass clef, an octave lower), and Previous and Next turn the page.

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

Show a part the way each player reads it, with this sheet music viewer for React with Radix UI. It holds one tune of Staffstand, a score viewer, in a hairline frame with a plus mark on each corner: a Select for the instrument, a drawn staff, and a page foot with Previous and Next Buttons and "Page 1 of 2". The staff is drawn in SVG from typed pitches and lengths, with a clef, a key signature worked out from the instrument, the time signature, stems, ledger lines, flags and beams, and a tempo marking above it. Picking an instrument rewrites the page: the clarinet in B flat is written a major second above the sound, which moves every note one step and the key from none to two sharps, and the cello reads the line an octave lower in the bass clef. The notes of each page are also in words for screen readers. It's built from Select, Button and Guides, with a CSS entrance only. For score, lesson and practice apps.

FAQ

How do I put in my own music?

Edit MEASURE_TEXT: each measure is a list of tokens, a pitch (a letter and an octave, such as E4) and a length (w, h, q or e for whole, half, quarter and eighth), and the measures must add up to four beats. The tune is written in C major at concert pitch; the viewer draws no accidentals, so keep it diatonic, or add an accidental field to Note and draw it beside the head.

How does it rewrite the part for an instrument?

Each entry in INSTRUMENTS has a clef, a number of letter steps to move every pitch, and a key signature in sharps. Because the tune is diatonic, a major second up is one letter step and two sharps, so a clarinet in B flat reads D major with every note one step higher, and the cello moves seven steps down and uses the bass clef. Add an instrument by adding a row.

Can the music be read without seeing the staff?

Yes. The drawing is decoration with a title, and each page also has a list of its measures in words, such as "Measure 1: C4 quarter, E4 quarter", spelled for the instrument and its key signature. The staff region is named, can be scrolled with the keyboard on a phone, and always runs left to right, as music is read, even in a right-to-left page.

Does anything play, and what stays local?

Nothing plays: no audio, no microphone. The page and the instrument you pick live in the component, and the status line says which. To play the part, map each note to a pitch in your own audio code and highlight the measure as it sounds.

How does it look on a phone?

The staff keeps a readable size and scrolls sideways inside its named region instead of shrinking, so the notes never get too small to read; the page foot stacks under the status line. The height of the panel does not change between pages or instruments.

All 100 music blocks