Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

User Personas Carousel Block for React Aria

Four user personas behind avatar tabs, each a card with goals, pain points, three five-cell trait scales and the tools the person uses.

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

Keep the people you design for in view with this user personas carousel for React with React Aria. Personaworks, a research repository, shows four personas under a row of avatar tabs, each a tab with an initials Avatar, a name and a role word. The slide under the open tab is the persona card: a name and a one-line quote, goals and pain points as short lists, three traits drawn as five-cell scales that read "Tech comfort, 4 of 5" to a screen reader, and the tools the person uses as Badges. A press or an arrow key on a tab moves the track, and a swipe or the Previous and Next Buttons move the tab. On a phone the tab row scrolls sideways and the card is full width. The ruled bands come from Guides. It's built from Carousel, Avatar, Badge, Button and Guides, with CSS transitions only. The personas and the product are made up.

FAQ

How do I use my own personas?

Edit PERSONAS. Each has an id, a name, a role word, initials for the avatar, a quote, goals, pains and tools as arrays of short strings, and three traits with a score from 1 to 5. The tabs, the cards and the scales' accessible names are made from that array.

How does it work with a keyboard?

Tab reaches the tabs, then Previous and Next. Only the open tab is a tab stop; the Left and Right arrow keys (mirrored in a right-to-left layout) move to the next or previous tab and open it, and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Slides that are out of view are hidden from the tab order and from screen readers.

How are the trait scales read by a screen reader?

Each scale is one image named with the trait and the score, such as "Tech comfort, 4 of 5", and its five cells are decoration. The score is never carried by colour: filled cells are solid foreground and empty ones are faint.

What is announced when it moves?

The foot line is the block's one polite live region: after each move a screen reader hears it, for example "Persona 3 of 4: Designer". The track itself is silent, so the same slide is not read twice.

What stays local in the demo?

Everything. The personas are typed and fictional, no research data is loaded and nothing is saved. To wire it for real, map the personas in your repository to the Persona shape and keep the rest.

How does it look on a phone?

The tab row scrolls sideways, the card is full width with its lists stacked, and the track follows a finger and snaps to a persona.

All 100 carousel blocks