Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Monogram Chips Single Marquee Logos Block for Vue

A strip for a children's reading app: a label row with a pause button, then one row of chips, each a square monogram badge and the name of a school.

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

A compact monogram-chip marquee for Vue with Ark UI. Two ruled bands that end the block make the strip: a label row with the claim at its start and, at its end, a button that pauses the scrolling; then one row of chips, each a small square badge with a school's initials and its name, fading out at both ends as they scroll. The marquee's looping copies are hidden from screen readers. It's built from Marquee, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a footer or a band under a hero, where the names matter and wordmarks would be too heavy.

FAQ

How do I change the schools?

Edit SCHOOLS at the top of the file: each entry is the initials in the badge and the name. Use one or two letters so the badge stays square; the initials are decorative and the name is the text screen readers read.

How does it stop?

Four ways: the pause button at the end of the label row (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the reduced-motion setting, which stops the row and leaves it as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

Why does the label have no heading?

It's a single line of context for a strip, so it's a paragraph. If your page needs a section name for screen readers, change it to an h2.

How is it marked up for screen readers?

The marquee is named "Schools". The first copy is the real list: each chip's name is text and the badge is decorative. The repeated copies are hidden from assistive technology and can't be focused. The chips aren't links, so they aren't tab stops.

Does it follow my theme?

Yes. Chips are bg-card with a border, the badges are bg-muted with a faint ring, the names are muted-foreground and turn to the foreground on hover, and the fade is a mask. Nothing is a fixed colour and primary isn't used.

All 100 logos blocks