shadcn.io is not affiliated with official shadcn/ui
Author Profile Blog Block for Solid
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 Solid with Ark 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.