shadcn.io is not affiliated with official shadcn/ui
Post Published Success Block for React Aria
A full-height confirmation for a published post: its address in a read-only field with a real copy button, a greyscale card showing how the link looks when shared, and links for three places to share it with two-letter tiles.
Installation
Overview
Hand people the link the moment a post goes live, with this publishing confirmation page for React with React Aria. It is the Proseplot page after a blog post was published, a whole screen with the page's rails and one band across it, split by a divider. The first half has a check in a muted tile, the heading, one sentence, the post's address in a read-only field with a Copy Button that really copies it, and a row of three outline links, LinkedIn, Facebook and Reddit, each with a two-letter tile (Li, Fb, Rd) beside its name, never a logo. The share card is drawn greyscale: a cover picture of a loaf on a board, the host, the title and two lines. On a wide screen the card fills the second half; on a phone it sits under the address. The one primary is the Shine Button View analytics, pinned to the foot of a phone's screen. Nothing was published or shared. For blogs, newsletters and any tool that publishes a page.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was published or shared. The blog, the post's title and summary and its address (under .example) are typed constants. What the browser really does is real: the copy button writes the address to the clipboard, and the page's live line says whether it worked. The three share links are placeholders with href="#". To wire it, fill the constants from the post you just published, give each link the service's own share URL with the address and title encoded into it, and point View analytics at the post's report.
Is the card what the services will show?
No: it is a drawing of the kind of card a link makes, in the theme's greys, so it follows light and dark and every preset. Each service builds its own preview from your page's Open Graph tags, so set a title, a description and a cover image on the post and check them in the service's own debugger. The drawing is hidden from assistive technology; a sentence under it describes it in words.
Why two letters instead of logos?
LinkedIn, Facebook and Reddit are named in text, which is how any share row names what it works with, and each sits beside a plain two-letter tile in an icon slot. A tile is not a logo: drop in a logo you have the rights to use if you have one, and never redraw a brand's. The tiles carry no brand colours.
How does copying work, and what if the clipboard refuses?
The field is read-only and the address is always selectable. The copy button copies it and the live line says "Link copied". If the browser refuses (a page not served over HTTPS, or no permission) the line says so and tells you to select the address in the field instead.