Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Icon Showcase Carousel Block for Vue

Twenty-seven line icons in three categories, nine to a page in a 3 by 3 grid, where pressing an icon copies its name and the label follows the category in view.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people browse an icon set a page at a time, with this icon showcase carousel for Vue with Ark UI. Iconcellar, an icon library, shows twenty-seven line icons in three categories (Arrows, Files and Objects). Each slide is a 3 by 3 grid of nine icons on shared hairlines with its name in code under it, and the label band above the track names the category in view. Pressing an icon copies its name to the clipboard and the band and status line say what was copied. The foot holds the counter ("Page 2 of 3"), a dot for each page and Previous and Next Buttons; the grid stays 3 by 3 down to 320 px. The ruled bands come from Guides. The icons are the project's own lucide set and the library is made up.

FAQ

How do I use my own icons?

Edit GROUPS. Each group has a label and nine glyphs, each an icon component and the name people will copy. Import the icons from the set your project uses; the 3 by 3 grid lines are added for you by cellsOf.

What does pressing an icon do?

It writes the icon's name to the clipboard and the status line says "Copied arrow-up-right to the clipboard". If the browser blocks clipboard access the status line says so instead and nothing is copied.

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.

What moves the track?

Previous and Next move one page; the dots go to a category. The track is the Carousel with a controlled page, and the block counts the pages itself.

What stays local in the demo?

Only the clipboard write is real. The categories and names are typed example data. To wire it for real, build GROUPS from your icon package and copy whatever string your docs ask for, such as an import line.

How does it look on a phone?

One page shows at a time and the grid stays 3 by 3 with cells about 100 px wide. The counter and buttons share the first line of the foot and the dots sit under them.

All 100 carousel blocks