shadcn.io is not affiliated with official shadcn/ui
Sharing Card Music Block for Solid
A share-card maker with a 4 by 5 card for one song, five card styles, a lyric-line switch, four named share targets that say they are not connected, a real QR code, a copy-link button and a download that saves the card as an SVG file.
Installation
Overview
Let listeners dress up a song before they send it, with this share-card maker for Solid with Ark UI. It shows a card at the start of a hairline frame with a plus mark on each corner: a drawn cover, the title, the artist, an optional original lyric line and a real QR Code of the song's link. At the end sit the options. Five styles (Plain, Ink, Stripes, Dots and Halftone) are a radio group of swatches, a Switch shows or hides the lyric line, and four share targets, Instagram, X, WhatsApp and Messages, are named in text with a two-letter tile and say plainly that they are not connected in this demo. Copy link is the only Shine Button and puts the link on the clipboard; Download card saves the card as an SVG file built from the same drawn marks, with the QR pattern read back from the screen. On a phone the card sits at 16rem above the options and the foot stays pinned. It's built from QR Code, Switch, Shine Button, Button and Guides, with a CSS entrance only. For music apps, release pages and anything people post.
FAQ
How do I make it share my own song?
Edit TITLE, ARTIST, LYRIC and LINK at the top of the file. The card is drawn from typed marks, so swapping the cover means replacing the COVER list, or drawing an <img> in the same box and keeping the title and artist as text beside it. Every look is one entry in LOOKS: a ground, an ink, a muted ink and the swatch shown in the picker.
What does Download card save?
A real SVG file named harbour-lamp-card.svg, 800 by 1000 units, built from the same marks as the preview: the style's pattern, the cover, the title, the artist, the lyric line when it is on, the link as text and the QR pattern read back from the code on screen. It uses named greys and the system sans-serif, so it looks the same in any viewer. Nothing is uploaded; the file is made in the tab and saved by the browser.
Do the share buttons post anything?
No. Instagram, X, WhatsApp and Messages are named in text beside a neutral two-letter tile, not a logo, and each press only says that the target is not connected in this demo. To make them real, open each service's own share link or the browser's share sheet with the link, and keep Copy link as the fallback.
Does the QR code really encode the link?
Yes. It is the catalog QR Code component fed the full link, drawn in black on white so a camera reads it in either theme. The card itself keeps its own greys in light and dark, like a picture would, while the rest of the panel follows the theme.
How do I use it from the keyboard?
The five styles are radio buttons: Tab lands on the chosen one and the arrow keys change it, with the card updating as you go. The lyric switch, the four targets and the two foot buttons follow in order, every control is named, and one polite status line says what changed, including "Link copied. Nothing was posted."
What stays local, and how do I wire it for real?
Everything. The style, the switch and the status are local state, and the link is a typed example address. To make it real, generate a short link for the song on your server, pass it as the QR code's value and the copied text, and replace the target buttons with real share links.