shadcn.io is not affiliated with official shadcn/ui
Partner Showcase Carousel Block for Svelte
Eight partners on a hairline track beside a type rail, All, Technology, Agency, Reseller and Integration with counts, that filters the track, with a lettermark tile, a line on what each does and a featured project.
Installation
Overview
Introduce the companies you work with, and let visitors narrow them by type, with this partner showcase carousel for Svelte with Ark UI. Allymere, a partner programme, shows eight partners in one ruled panel. A rail at the start lists All 8, Technology 3, Agency 2, Reseller 1 and Integration 2, the counts worked out from the partners, and choosing one rebuilds the track, goes back to the first partner and says "Showing 2 agencies". Each hairline cell has an invented two-letter tile, the name, the type as a Badge, a line on what the partner does, a featured project and a ghost Button, "Learn more". Three partners show from the large breakpoint, two from small and one with the next peeking on a phone, where the rail becomes a row of chips that scrolls sideways above the track. A foot holds the counter, a window of dots and Previous and Next. It's built from Carousel, Badge, Button and Guides, with CSS transitions only. The partners and projects are made up.
FAQ
How do I use my own partners?
Edit PARTNERS: an id, a name, a type, a two-letter tile, a line in does and a project. The rail comes from KINDS and its counts from the list, so add a type in both places. The tile is a slot for a logo you have the rights to use; the demo never draws a brand's mark.
How does the rail work?
The rail is a set of native radio buttons in a fieldset named "Partner type", drawn as rows (chips on a phone). The checked one is solid foreground; the arrow keys move between them, as for any radio group. Choosing a type resets the track to its first partner, and a type with fewer partners than fit in view simply leaves the rest of the track empty.
The track follows the type through the Carousel's slideCount and a controlled page.
Where does Learn more go?
Nowhere in the demo: it says "no page opens in this demo" in the foot. In your project, make it a link to the partner's page (a Button with asChild and an anchor, or your router's link) and keep the name in the accessible label.
How does it work with a keyboard?
Tab reaches the rail (one stop, then arrow keys), then Previous, the dots and Next and each visible Learn more. With focus inside the track, the arrow keys move it by one partner (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Partners that are out of view are hidden from the tab order and from screen readers.