shadcn.io is not affiliated with official shadcn/ui
Podcast Directory Music Block for React
A podcast directory with six categories and their counts, a search that marks the words it found in titles and hosts, a sort menu, show cards with drawn covers, star ratings and a Subscribe toggle, and an empty state with Clear.
Installation
Overview
Help listeners find a show worth following, with this podcast directory for React with Base UI. It puts a list of categories beside a grid of shows in a hairline frame with a plus mark on each corner: All, Comedy, Culture, Science, History and Food, each with its count, and on a phone a sideways row of the same buttons. A search box filters by title and host and marks the words it found with Search Highlight Text; a sort menu orders by rating, episodes or name. Every card has a drawn cover, the title, the host, read-only Rating stars with the average in text, the episode count and a Toggle that subscribes, counted in the header as "Subscribed (3)". Cards live in a fixed-height scrolling region, so a filter never moves the panel, and a search with no match shows an Empty state with a Clear filters button inside it. It's built from Toggle, Rating, Search Highlight Text, Empty, Input Group, Native Select and Guides, with a CSS entrance only. For podcast apps, audio catalogues and any browsable directory.
FAQ
How do I fill it with my shows?
Edit SHOWS: each has an id, a title, a host, a category, its episode count, a rating in tenths (46 is 4.6) and a drawn cover. CATEGORIES lists the filters and the counts beside them are worked out from the shows, so adding a show raises its category and All together. The header's "Subscribed" count is the length of the subscribed list.
How does the search work?
It keeps shows whose title or host contains what you typed, ignoring case, and marks the matching letters in both places. Typing, picking a category and changing the sort all reflow the list inside the same fixed-height region. The count above the region and the status line below it say how many shows are showing.
What happens when nothing matches?
The list empties and an empty state appears in its place, inside the region, naming the search and the category with a Clear filters button that resets both. The panel keeps its height, so the buttons below do not jump.
Does Subscribe do anything real?
No. It is local state: the toggle fills in, the header count moves and the status line says "Subscribed to ... in this demo". Nothing is stored or sent, and a reload starts again from three subscribed shows. To make it real, call your subscription endpoint from the toggle's handler and keep the list from your account.
How do I use it from the keyboard?
Tab runs the category buttons (the chosen one is marked current), the search box and its clear button, the sort menu, and then the Subscribe toggle on each visible card; Space or Enter flips it. Every toggle is named with its show, such as "Subscribe to Pocket Atlas", and the polite status line says what changed.