shadcn.io is not affiliated with official shadcn/ui
API Endpoints Carousel Block for Vue
Ten shipping-label endpoints grouped by method on a hairline track, with a row of GET, POST, PUT and DELETE buttons that jump to a group and follow the track as it moves.
Installation
Overview
Let readers jump to the group they want in a long list of cards, with this API endpoints carousel for Vue with Ark UI. Waybillo, a shipping-label API, lists ten endpoints sorted by method: four GET, three POST, one PUT and two DELETE. Each cell shows the method as a mono word whose weight is drawn in its border (never in a colour), the path as code, one sentence and a median latency in milliseconds. A toolbar band of four Buttons ("GET 4", "POST 3", "PUT 1", "DELETE 2") scrolls the track to a group's first cell, and the button of the group in view carries aria-current, also when you drag or use the arrows. The foot holds the counter, a dot for each step and Previous and Next. Three cells show from the large breakpoint, two from medium and one with the next peeking on a phone, where the button row scrolls sideways. The bands are ruled by Guides. The product and its endpoints are made up for the example.
FAQ
How do I add my own endpoints?
Edit ENDPOINTS, keeping the list sorted by method so each group is one run of cells. Each has an id, a method, a path, a note and a median latency in milliseconds ms. The group buttons, their counts and the jump targets are derived from the list, so a new endpoint only needs to be placed in its group.
How does the jump row follow the track?
The current group is the group of the first whole cell, or of the last whole cell on the final page. A jump to a group that cannot reach the start of the track, such as the last group, remembers the page it landed on, so that group stays current until the track moves again.
The jump sets the Carousel's controlled page.
How does it work with a keyboard?
Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Cells that are out of view are hidden from the tab order and from screen readers.
Why is the method not coloured?
A method is never told by colour alone. GET is a plain border, POST a thicker bold one, PUT a dashed one and DELETE a double one, and the method is always written out. The border follows your theme's foreground, so it reads in light and dark.