Blog 107 block design & features
Blog107 is a topic overview made with Shadcn UI that shows how much has been written in each area. A heading, a description, and a large total article count sit in the left column, and the right column lists up to ten topics sorted from most to fewest articles. Each row has the topic name with its last updated date beneath, a horizontal bar scaled against the largest topic, and the exact count at the end.
The bars bring a light, chart-like texture to an otherwise typographic block. Tracks use the muted surface with a soft gray fill, and the bars stay static while topic names underline on hover. Rows are separated by hairlines, counts use a mono face, and there are no cards, images, or icons.
It sits between a category list and a small data visualization, which makes it a less common take on a topics page. Complexity is low: each topic needs a name, an accurate count, and a last updated date, and the block handles the sorting and bar widths itself.
On wider screens the heading column stays pinned while the list scrolls. On phones the bar moves under the topic name and count.