shadcn.io is not affiliated with official shadcn/ui
Categories Blog Block for Vue
A 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.
Installation
Overview
A category index for Vue with Ark UI, written for Leafhollow, a houseplant magazine. A centred header sits over seven cells that share their hairlines from rail to rail and end the block. Six are topics: each is one link, the name, with an icon ring, a one-line scope, the title of its latest post, its post count and a bar showing its share of everything published. The counts, the shares and the latest titles are derived from the typed list of posts, the shares are rounded so they add up to 100, and the biggest topic spans two columns. A seventh cell links to every post. Each cell wears a small drawn swatch in its corner, a line pattern the category owns. One column on a phone, two on a tablet, three on a desktop. It's built from Guides with Lucide icons, with CSS for the entrance and the hover. For magazines and blogs with a handful of topics.
FAQ
How do I add posts and categories?
Edit POSTS (every post, newest first, with its category and title) and CATEGORIES (a name, an icon and a one-line scope) at the top of the file. Counts, shares, the ranking and each cell's latest title are derived, so adding a post changes the numbers and the bars. A new category also needs a swatch in SWATCHES and its name in the Name type. The grid is built for six topics plus the All cell: with another count, check the spans so no slot is left empty.
Why do the shares add up to 100?
Each share is rounded by the largest-remainder method: every category gets its whole percentage, and the points left over go to the categories with the biggest fractions. The bars use the same numbers as the text, so the two never disagree by a point.
Why does the biggest cell span two columns?
The categories are ranked by post count, and the first spans two columns from sm up, so the grid says which topic the magazine writes about most. The All cell takes the slots that remain, which is what keeps every row full on a hairline grid: an empty slot would show the border colour.
How does it work with a keyboard and a screen reader?
Each cell is one link, its category name, and the link covers the whole cell with its focus ring drawn inside it. The icon, the swatch and the bar are decoration and hidden from assistive technology; the count and the share are text. Tab visits the seven links in reading order.