shadcn.io is not affiliated with official shadcn/ui
Carousel Blog Block for Vue
Eight posts in a multi-up carousel of cells with overshoot, each leading with a drawn instrument face; a count and previous and next buttons sit in the heading row.
Installation
Overview
A post carousel for Vue with Ark UI, written for Fieldcraft, a surveying-tools blog. Eight posts sit in a row of cells with overshoot, one on a phone, two on a tablet and three on a desktop, with the next post cut off at the end as the cue to scroll. Each cell leads with a small drawn instrument face (a level vial, a compass rose, a dial gauge, a contour map, a measuring tape) in your theme's tokens, then the category, the title as the cell's one link, a short dek and a byline. The heading row holds a "1–3 of 8" count and previous and next buttons that wrap around; the arrow keys turn the posts too, and nothing plays by itself. Posts out of view are removed from the tab order and from the reading. It's built from Guides, Carousel, Badge, Avatar and Button, with CSS for the entrance and the hover. For engineering blogs, product journals and any list of posts that should fit one row.
FAQ
How do I add my own posts?
Edit POSTS at the top of the file. Each post has a title, a one-line dek, an author, a category, a date as an ISO string, a reading time in minutes, an href, a cover and a reading (what the instrument shows). The count, the screen-reader announcement and the slide names are all computed from the list, so any number of posts works.
How does the keyboard work?
Tab reaches the previous and next buttons and then the visible posts' titles; the posts out of view are inert, so Tab never lands on one you can't see. The arrow keys move the carousel by one post, and in a right-to-left page the arrows follow the reading direction, so the end arrow always goes forward. A key pressed on a post's title hands focus to the previous or next button, because that post may have just left the page. The buttons wrap around at the ends, so one never disables while it has focus. A polite status line announces "Showing posts 2 to 4 of 8" for screen readers.
What does the count show?
The posts in full view: "1–3 of 8" on a desktop, "1–2 of 8" on a tablet and "1 of 8" on a phone. It is recomputed from the screen width and the current page.
What is it built on?
The catalog Carousel, which is Ark UI's carousel: the page is controlled, the posts per page follow the screen width, and the slide names come from the list.
How are the instrument covers drawn?
Each is one SVG at the cover's proportions, built from circles, ticks and a needle or a bubble whose position comes from the post's reading; every stroke stays a hairline at any size and every colour is a theme token, with one foreground chip for the reading. They are artwork, so a right-to-left page never mirrors them.