Blogpost 29 - Article with highlight to share

Pro

A text-led blog article with a standfirst where selecting any passage opens a floating toolbar to copy the quote or share it.

Shadcn Blogpost 29 block

Component data

ID
blogpost29
Access
pro
Created
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blogpost 29 block design & features

Blogpost29 is a text-led article where readers can share any passage, built with Shadcn UI Avatar, Button, and Separator components. The header shows the category, date, and read time, a large headline, a standfirst with a primary rule on its left edge, and an author row beside a hint about selecting text. Selecting words anywhere in the prose article opens a small toolbar above the selection with a copy quote button and share buttons.

The toolbar is a compact popover-style bar with a border and shadow, centered over the selection and kept inside the column near the edges. Copying swaps the icon for a check and the label for a short confirmation. Selected text picks up a tinted highlight in the primary color, and the rest of the page stays plain and typographic with no feature image.

Highlight to share is familiar from long-form reading platforms but rare in blog templates, which makes this a distinctive single post. Complexity is moderate and code-driven. It needs only the shared article content and the share links.

On touch devices the browser's own selection menu also appears, so the toolbar works best with a pointer.