shadcn.io is not affiliated with official shadcn/ui
Share Menu Changelog Block for Ark UI
Three release rows, each with a Share menu of Copy link, Send by email and Share as a post: Copy link copies the release's own address for real, and the result shows in the row.
Installation
Overview
A share menu on every release for React with Ark UI, written for Passalong, a fictional link-sharing tool. A start-aligned header carries the title and one sentence, and under it three releases are rows between the page's rails: the version, day and type tags (an icon and a word), a linked title and a sentence, and at the end a Share button that opens a menu of three plain items, with no brand marks: Copy link, Send by email and Share as a post. Copy link puts the release's own address (this page's, with the release's anchor on the end) on the clipboard for real, or says the clipboard refused it. The other two only prepare a draft in this demo and say so: nothing is sent or posted. The result shows in the row, in a line that is always there so no row changes height, and a polite status reads it out. The rows end the block. On a phone the Share button sits under the text. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Dropdown Menu, Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For changelogs whose releases get passed around. The releases are example data.
FAQ
What does Copy link copy?
The page's own address with the release's anchor on the end (for example …/changelog#passalong-v4-7-0), read in the browser after the first render so the server's markup is stable. Each row is an article with that id and a scroll margin, so the link lands on it. If the browser refuses the clipboard, the row says "Couldn't copy the link".
Do Send by email and Share as a post send anything?
No. In this demo they prepare a draft and say that nothing is sent or posted. To make them real, change draft: open a mailto: link with the title and address, or your own composer for a post. The items carry no brand marks, so they suit any network you add.
How does it work with a keyboard and a screen reader?
Tab reaches a row's Share button, named for the release ("Share v4.7.0: Links that expire on their own"); Enter or Space opens the menu, the arrow keys move between the three items, Enter chooses one and Escape closes the menu, returning focus to the button. The result is read once in a polite status that is present from load and filled after an action; the visible line in the row repeats it and is hidden from assistive technology, so nothing is read twice.
How do I change the releases?
Edit RELEASES at the top of the file, newest first: each has a version, an ISO date, an id for the anchor, its kinds, a title and a summary. Dates are fixed, never computed from today. Keep to three to five rows.