React Aria music blocks.

The 100 music blocks are interface sections for music and audio apps: players, queues, playlists, albums, lyrics, concert pages, recording tools and podcasts. They use drawn covers and invented artists, and no audio plays in the demos.

There are 16 groups: Players, Queues and track lists, Making playlists, Albums and playlist readouts, Artists, credits and genres, A concert night, and more. They run from listener views to creator and business ones, such as mixing pads, notation, payouts and practice tools.

Mini Player Music is a docked bar that expands to a card with seek, shuffle and repeat. Lyrics Viewer Music highlights the current line and seeks by line. Album Grid Music is a shelf with genre filters and a queue button. Audio Effects Music is a reorderable pedalboard. Vinyl Player Music and Podcast Player Music are other player styles.

A comment describes the panel, then typed tracks, albums and lines, and a component that holds the state: for the mini player that is the current track index, the position, playing, liked, volume, shuffle and repeat. All covers are drawn, not images.

The blocks do not play sound: their playing flag and position are plain state advanced by the demo. Add an audio element (or the Web Audio API) and drive that state from its play, pause and timeupdate events, and set its currentTime when the seek slider moves. The status line should then report what really plays.

In the cover-drawing blocks a comment says to replace the Cover with an img and keep the title and artist beside it, since they carry the meaning. Add an image URL to your track or album type and pass it to the img.

Lyrics Viewer Music holds timed lines and treats the current line as the last one whose time stamp is at or before the position. Give it your own synced lines, feed it the real playback position and pressing a line will seek to its stamp. Under reduced motion, its playing step is replaced by a Next line button.

Replace the typed track array with your catalogue, keep the queue logic (skip moves through the queue) and load the tracks from your API. The album shelf's Queue button only changes local state, so call your queue endpoint there.

Audio Effects Music reorders pedals by a pointer drag or by Move earlier and Move later buttons, and announces each change. Those buttons are the keyboard and touch route, so keep them when you connect real effect nodes in the Web Audio graph.

This page lists 100 of the category's 100 music blocks for React on React Aria. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The music blocks here are written on React Aria primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/aria/music-ai-playlist.json). The other bases are one picker away from /music-block/aria.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on React Aria. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/aria/music-ai-playlist.json for AI Playlist Music. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: AI Playlist Music brings Button, Empty, Field, Guides, Shine Button, Textarea and Toggle, installed before it. Nothing else changes in your project.

Use the filters above the grid: 16 kinds of music block, led by shows, venues and rooms (8), sound and settings (8), recording and editing (8) and practice and learning (8), and sort by popular or name. A good first look: AI Playlist Music, Album Grid Music and Album Notes Music. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a music block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the players and playlists, artists and shows and sound and studio kinds.

Open its page and use the full-screen viewer (/view/music/aria/ai-playlist) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each music block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on React Aria, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the music blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 music blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a music block, read it with get_block and install it on your React on React Aria stack.

Pass `category: "music"` to search_blocks to search only the 100 music blocks, or to list_blocks for the 16 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "music", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.