Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Quote Wall Carousel Block for React

A vertical column of eight large italic quotes at a fixed height with the next one peeking under a fade, a large 03 / 08 counter and category beside it, and Up and Down buttons that move one quote.

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

Give words room, with this quote wall carousel for React with Base UI. Pullquote, a quotation archive, shows eight lines one at a time in a vertical track at a fixed height: each is large and italic, with the author and role under it, and the next quote peeks in under a fade at the foot of the track so the wall always shows there is more. Beside the track, the start cell holds a large "03 / 08" counter that changes in place, the quote's category word (Leadership, Craft or Growth) and Up and Down Buttons that move one quote. The arrow keys, Home and End do the same. Quotes out of view are hidden from the tab order and from screen readers. It is built from Carousel in its vertical orientation, Badge, Button and Guides. The quotes and the people are made up.

FAQ

How do I use my own quotes?

Edit QUOTES. Each has an id, the text, an author, a role and a category from the Category type. The counter pads the numbers to two digits from the list's length, so the width holds. For long quotes, raise the track's height (h-80) so a quote and the start of the next both fit.

How does the next quote peek?

The track shows one and a quarter quotes, and a gradient mask fades its last fifth, so the first lines of the next quote show faintly. The next quote is for looking at: it can't be focused or read until it is current.

How does it work with a keyboard?

Tab reaches Up and Down, which stay in the tab order at the ends and are marked unavailable instead of disabled. The Up and Down arrow keys move one quote (they never mirror in a right-to-left layout) and Home and End jump to the first and last. The block's one polite line reads, for example, "Quote 3 of 8, Craft". The arrow keys work with focus on the buttons (Embla's slides can't take focus).

What stays local in the demo?

Everything. The quotes are original lines attributed to made-up people, typed in the file. To wire it for real, load your archive into QUOTES, with permission for each quotation and attribution.

How does it look on a phone?

The counter and category sit above the track, the track keeps its height with the next quote peeking, and the buttons move under it.

All 100 carousel blocks