An Article Reader With Live Comments
Blog Detail Page renders a single article from headline to discussion: a category Badge, a large tracking-tight title, an author byline with avatar and date, share buttons, the prose body, and a fully interactive comment section. It is the reading companion to the listing block in the same category and completes the route pair every blog needs.
The block fits marketing blogs, knowledge bases, newsletter archives, and community publications. Because the header exposes an onBack callback wired to the Next.js router, it also behaves well inside modal or stacked navigation patterns.
How the Comment Thread Works in React State
Comments are plain React state on the page component. Submitting the Textarea form prepends a new entry with a Just now timestamp, likes start at zero, and each comment card offers Heart and Reply actions with hover transitions. The empty-input case is guarded so blank comments never post.
Because the handlers are ordinary callbacks, persisting the thread means swapping setState calls for API mutations. The Comment interface (id, author, content, timestamp, likes) doubles as a starting schema for your backend table.
Author Header and Social Sharing Buttons
The header component draws its Twitter, Facebook, and LinkedIn icons as inline SVGs sharing one props object, so no icon library is pulled in for three glyphs. They sit next to a back Button and an author block built from Avatar, AvatarImage, and AvatarFallback with the publish date underneath.
Titles scale from text-4xl to text-5xl across breakpoints, and the byline row wraps with flex-wrap, keeping the header intact on narrow phones without extra media queries.
Prose Styling, Dark Mode, and Custom Properties
The article body maps paragraph strings into a prose container styled with the Tailwind typography plugin, with an optional aspect-video cover image slot above it. Reading rhythm comes from relaxed leading and generous vertical spacing rather than fixed heights.
Comment cards use bg-card surfaces and blog-specific custom properties like border and hover tokens, so both themes stay coherent. If you want a warmer reading mode, redefine those variables in globals.css; the components reference tokens only and never hardcode a hex value.
Pro Plan, Install Paths, and Other Frameworks
This example is published under the pro tier: previewing is free, while reading the code tab or running the shadcn CLI command (offered in npm, pnpm, yarn, and bun flavors at the top of the page) requires the All Access plan on your account.
Framework choice will not block you. Besides the React version, the article reader exists as a Vuejs block assembled from shadcn-vue components and as a Svelte block assembled from shadcn-svelte components, each keeping the comment interactions intact.