shadcn.io is not affiliated with official shadcn/ui
Topic Cluster Diagram Blog Block for React
A hub-and-spoke diagram of a topic cluster: the pillar guide at the hub of a drawn wheel, six topic links on the rim, and the cluster's posts as ruled rows beside it; on a phone a nested list with connectors.
Installation
Overview
A topic cluster for React with Base UI, written for Spokewheel, a bicycle-maintenance blog. A start-aligned header sits over a split behind a divider. At the start, a framed figure draws a wheel: the pillar guide is the hub, six topics (Wheels, Chains, Brakes, Gears, Tyres, Bearings) sit on a rim, and a spoke joins each to the hub. The topics and the pillar are real links, and the positions and the spokes come from one function of each topic's angle, so the drawing and the nodes can't drift apart. At the end the cluster's seven posts are ruled rows with the author, the date, the reading time and a topic badge, the pillar first. On a phone the wheel unwinds into a nested list: the pillar, then the topics hanging off a rail with a hairline each. It's built from Badge and Guides, with CSS positions and an SVG for the spokes. For pillar-and-cluster content, documentation maps and any blog that wants to show how its posts relate. The posts and counts are fictional.
FAQ
How do I change the topics?
Edit TOPICS (a name, an id, a post count and an angle in degrees) and POSTS for the list. Six topics at 60 degrees apart fill the rim evenly; for another count, spread the angles evenly and widen or narrow RIM_X and RIM_Y. The spokes, the rim and the nodes' positions are all computed from the angles at module scope.
How is the wheel drawn?
The rim and the six spokes are one SVG in a 100 by 100 box stretched to the stage (with vector-effect: non-scaling-stroke, so every line stays a hairline); the nodes are links placed over it by percentage through two CSS variables. The SVG is hidden from assistive technology and the links carry the content. The stage is 16 by 10 from md and 5 by 4 from lg.
What happens on a phone?
Below md the wheel isn't drawn. The pillar sits first and the topics follow as a list indented under a vertical rail, each with a short hairline joining it to the rail. It is the same markup, so nothing is duplicated.
How does the keyboard work?
Every node and every post is a link in reading order: the pillar, then the six topics clockwise from the top at the start side, then the posts. Focus rings are drawn on the nodes and inside the post rows.
Related
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- Pro
Tag Cloud Blog
Topics and indexesA foraging blog's tag cloud: fourteen tags in five sizes derived from their post counts, each a toggle that lists its three latest posts in a fixed-height panel beside the cloud.
- Pro
Knowledge Base Tree Blog
Topics and indexesA help centre's articles as a working tree of topics beside a preview of the picked article: its topic, title, two-sentence summary, last update and an Open article link.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.
- Pro
Related Posts Shared Topics Blog
Card gridsA More like this strip: three related posts as cells on shared hairlines, each showing which of the current post's three topics it shares, with a tick on the shared ones and a count such as 2 of 3 topics in common.
- Pro
Post Rows With Sidebar Blog
Post listsA reading layout: five post rows with small drawn route maps at the start, and behind a divider a sidebar of topics with counts, a numbered most-read list and the archive by year.