shadcn.io is not affiliated with official shadcn/ui
Post Published Success Block for React
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 Base UI. 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.
Related
- Pro
A full-height confirmation for a launched email campaign: four sending waves with a bar and a state word each, a Pause sending toggle that holds the running wave, and the email as sent, drawn greyscale in a frame.
- Pro
A start-aligned confirmation for a scheduled newsletter: a select of three send times in one zone and a table of five audience regions with the local weekday and time the issue lands, worked out from each region's offset.
- Pro
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- Pro
Share Link Dialog
Share and inviteA prototype file with a share dialog shown open: a switch for anyone with the link, a read-only link whose role and expiry show in its suffix, a Copy link button that really copies, and a viewer preview that turns the file behind the dialog read-only.
- Pro
Copy Link Share CTA
Forms and captureA band call to action for a referral programme that follows your theme: the pitch beside a read-only invite field with a Shine Button that copies it, real email and system share links, and a closing band counting invites.