shadcn.io is not affiliated with official shadcn/ui
Quote Card Share Blog Block for React
A quote-card builder: pick one of three sentences from an issue and a drawn typographic card shows it, with Copy quote and Copy link buttons that really copy and a Send by email link.
Installation
Overview
A share block for React with Base UI, written for Quotewick, a weekly newsletter of quotations. Instead of four network buttons, readers share a line: three sentences from the issue are a radio group on shared hairlines at the start of a split, and the card they choose is drawn at the end, framed, with a huge quotation mark, the sentence, a masthead and the attribution. Copy quote puts the sentence and its attribution on the clipboard, Copy link copies a link to that line, and Send by email opens your mail app with the quote written out. Nothing is posted to any network. The card is drawn in your theme's tokens, so it follows light and dark, and on a phone it sits under the choices. It uses RadioGroup, Field, CopyButton, Button and Guides.
FAQ
How do I add my own sentences and issue?
Edit LINES (an id and the text) and ISSUE (author, number, title and the base address) at the top of the file. The radio group, the card, the copied text, the link (ISSUE.url plus # and the line's id) and the email are all built from them. Keep the sentences short: the card sets its type in container units, so about two lines to four lines fit its frame.
What do the buttons really do?
Copy quote writes the sentence in quotation marks, a dash and the attribution to the clipboard, and Copy link writes the issue's address with the line's anchor; each says "copied" to screen readers. If the browser refuses (a page not served over HTTPS), the button shows a cross. Send by email is a mailto: link, so it opens whatever mail app the reader has. There are no network buttons and nothing is sent anywhere.
Why a drawn card, and can I save it as an image?
The card is HTML and CSS in your theme's tokens, so it follows light and dark and any preset and never needs a photo or an image service. It isn't exported as a picture: add your own export (a screenshot library or an image route) if you want a download.
Can I use it with a keyboard?
Yes. The three sentences are one radio group: Tab enters it, the arrow keys move the choice and change the card at once, and Tab continues to the two buttons and the email link.
Related
- Pro
Post Footer Blog
Article partsThe end of an article: tags as links, a share cluster whose Copy link really copies, an author panel beside Published and Updated dates, and Previous and Next as two cells on a shared hairline with arrow key hints.
- ““““Pro
Pull Quotes Blog
Article partsFour pull quotes from a science-writing blog in cells with line overshoot: a large drawn quotation mark, the key phrase marked by a highlighter, who said it and in which post, a Copy button and a Read in context link.
- Pro
Share Popover FAQ
Reading and sharingA FAQ for an event ticketing platform whose open answer ends in a Share button: a popover with a copy-link button, an email and a QR code of the answer's link.
- Pro
Reaction Bar Blog
Reader feedbackA reaction bar under a review: five icon reactions with rolling counts in one raised strip, any number on at once, and a line that names the top reaction from the counts.
- Pro
Letters to the Editor Blog
Reader feedbackLetters to the editor on cells with line overshoot: a typographic letterhead, the reader words in a blockquote, a sign-off with a place, and an indented Editor replies on two letters, with a toggle that quiets the unanswered ones.
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.