shadcn.io is not affiliated with official shadcn/ui
Author Profile Blog Block for React
One writer's profile in a split: a large initials avatar, name and role, a bio, icon links with tooltips, a Follow toggle that reads Following, three figures from her posts, and her four newest posts as a list.
Installation
Overview
An author profile for React with Base UI, written for the Chainhurst Review, a cycling journal. A split on a divider: the start side is the profile, with a large initials avatar, the name as the heading, the role, a bio, three icon links with tooltips (website, email, feed), a Follow toggle that reads "Following" once pressed, and a band of three figures (posts, reads, average read time) along its foot. The end side lists her four newest posts as rows with a category badge, the title as the row's one link, the date and the reading time, and an "All 11 posts" button. A phone stacks the posts under the profile. Every figure is worked out from the typed list of her posts, and following lives on the page only. It's built from Guides, Avatar, Toggle, Tooltip, Badge and Button. For magazines, company blogs and newsletters that give each writer a page.
FAQ
How do I use my own author and posts?
Edit NAME and the POSTS list at the top of the file: each post has a title, a category, a fixed date as an ISO string, its minutes and its reads. The count, the reads and the average reading time under the bio are calculated from that list, and the four newest posts are picked by date, so adding a post updates everything. Dates are formatted in UTC so the server and the browser print the same day.
What does the Follow toggle do?
It changes local state and nothing else: the label reads "Follow" or "Following", the toggle is pressed while following, and a status line says "Following. Saved in this demo only." Connect it to your own endpoint in the onPressedChange handler. Its accessible name stays "Follow Lucia Ferrer" in both states and the pressed state is announced.
Are the icon links usable without a mouse?
Yes. Each link is a real anchor with a visually hidden name ("Lucia's website"), and its tooltip opens on keyboard focus as well as on hover; the tooltip repeats the name, so nothing depends on it. Replace the href values with your own.
Related
- Pro
Hover Card Author Grid Blog
Authors and staffSix writers in a three by two grid of cells on shared hairlines: initials avatar, role, a bio clamped to two lines, a posts link, and a hover card on the name and avatar with the writer's three newest titles that also opens on focus.
- Pro
Role Filter Contributors Blog
Authors and staffA press's contributors as an avatar group with a count, a role toggle (All, Staff, Guest, Editors) with a live Showing 3 of 9 line, and a captioned table of name, role badge, articles and month joined that never changes height.
- Pro
Author Frame Guest Post Blog
Article partsA guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.
- 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
Social Links Team
Lists and directoriesTwelve people of an API gateway company in two columns of ruled rows, each ending in text links to the GitHub, X and LinkedIn handles that person has, the handle visible as the link text.
- Pro
Period Toggle Stats Blog
Stats and draftsA blog's own numbers: a 7, 30 or 90 day toggle swaps a strip of four figures and five ranked top posts with bars; the rows stay in place and take whichever post holds each rank.