shadcn.io is not affiliated with official shadcn/ui
Topic Cluster Diagram Blog Block for Ark UI
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 Ark 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.