shadcn.io is not affiliated with official shadcn/ui
Sync Licensing Music Block for React Aria
A sync licensing desk: six pre-cleared tracks you filter by use and search, and a quote for the one you pick built from use, term, territory and an Exclusive switch, with every step of the price shown and a Request licence button.
Installation
Overview
Let a music supervisor price a licence in seconds, with this sync licensing desk for React with React Aria. Placecue lists six tracks with their genre, length, tempo and the uses each is pre-cleared for. A Segment Group (All, Film, TV, Ad, Game) and a search Input narrow the list without changing its height, with an empty state when nothing matches. The side cell holds the quote for the track you pick: the use as four pills (the ones the track isn't cleared for are struck through), a Native Select each for term and territory, and an Exclusive Switch. The price is a list in which every step is shown: the base fee, then each choice's percentage applied in turn, rounded half up to the cent, ending in the licence fee. The foot's one Shine Button, Request licence, notes the request in this demo and sends nothing. It's built from Segment Group, Native Select, Switch and Guides with a CSS entrance only. Rates are examples, not a price list.
FAQ
How do I load my own catalogue and rates?
Edit TRACKS: each has an id, title, artist, genre, length in seconds, tempo, uses (the usage ids it is cleared for) and base, the one-year, one-country, non-exclusive fee in cents. USAGES, TERMS and TERRITORIES hold the multipliers in percent and EXCLUSIVE the exclusivity one. The quote, its steps and the total are worked out from those.
How is the price worked out?
Each choice scales the fee so far: use, then term, then territory, then exclusivity, and each result is rounded half up to the cent before the next. The list shows the running fee after every step, so you can see what each choice added, and the last line is the licence fee. Integer cents mean the lines always agree with the total.
How do the filter and search work?
A track shows when it is cleared for the chosen use and its title, artist or genre contains the search text. Tracks that don't match stay in place but unseen, so the list never changes height, and the count reads "3 of 6". If the track you picked drops out, the first match is picked for you and the quote follows; if nothing matches an empty state explains.
What does Request licence do?
Nothing leaves the page: it only puts "Request noted in this demo. Nothing was sent." in the status line. Changing any choice clears that line. In your app the button would send the track, use, term, territory, exclusivity and the fee to your licensing team or API.