shadcn.io is not affiliated with official shadcn/ui
Brand Guidelines Carousel Block for Vue
Six brand-guideline chapters, Do beside Don't with a drawn example each, with a chapter rail that follows the track and jumps to any chapter, and a select on phones.
Installation
Overview
Publish brand rules people can actually read, with this brand guidelines carousel for Vue with Ark UI. Markbook, a brand-guideline site, shows the guidelines of Tarrowmere, a made-up tea shop, in six chapters (Logo, Typography, Colour, Icons, Imagery and Voice), one to a slide. Each chapter sets three "Do" rules beside three "Don't" rules, each side topped by a small drawn example, and a check or a cross with the words, never green and red. A chapter rail at the start lists the chapters with a number and a Badge of "6 rules"; the current chapter is marked and follows the track, and a press on the rail jumps there. On a phone the rail becomes a select over the track. The foot holds "Chapter 3 of 6, Colour" and Previous and Next Buttons. The Colour examples are the only fixed colours: a brand's swatches do not change with the theme. The ruled bands come from Guides.
FAQ
How do I use my own guidelines?
Edit CHAPTERS. Each has a title, a sample (which drawn example to show) and three dos and three donts. Replace SWATCHES with your brand's colours as bare hex digits, and redraw the examples in the Sample components.
How do the rail and the track stay together?
They share one index. Moving the track moves the rail's current chapter, and pressing a chapter or choosing one in the phone select moves the track. The track is the Carousel with a controlled page, and the block counts the pages itself.
How does it work with a keyboard?
Tab reaches the controls, Previous, the dots and Next. With focus inside the track, the arrow keys move it (mirrored in a right-to-left layout) and Home and End jump to the first and last position. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled, so focus never disappears. Slides out of view are hidden from the tab order and from screen readers.
Why are there fixed colours in the Colour chapter?
A brand's swatches are the thing being shown, so they stay the same in light and dark. They are drawn through one CSS variable inside the slide, and the rest of the block uses your theme's tokens.