Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Quote Card Share Blog Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A share block for React with React Aria, 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.

How does it fit on a phone?

The split stacks: header, the three sentences, the actions, then the card, all in one column with hairlines between them. Nothing scrolls sideways at 320 pixels.

Does it work right to left?

The block mirrors, but the card is artwork: it stays left to right, as a printed card would, so a quote in a right-to-left language should be set in its own card. The radio group, the buttons and the layout flip.

All 100 blog blocks