Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Spinner examples · Inline

Spinner in List Item for React

A list item with a muted spinner, a title and a description while a profile loads.

Framework
UI library

A row can load on its own while the rest of the list is ready. This Item shows a muted Spinner as its media, with Loading user profile and a short description.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Which item parts does this row use?

Item, then ItemMedia, then ItemContent with ItemTitle and ItemDescription. ItemMedia leaves variant at its default. The spinner is the media.

How is the spinner muted?

className is text-muted-foreground on the Spinner. The icon uses currentColor, so that class is the color. The size stays the default size-4.

What do the title and description say?

ItemTitle is "Loading user profile". ItemDescription is "Please wait while we fetch your data". Both are visible text beside the spinner.

What does a screen reader announce?

The title and description are read as text. The spinner has role="status" and an aria-label of Loading. Pass aria-label="Loading user profile" on the Spinner when the status should match the title.

How do I make the spinner smaller in the row?

Add size-3 beside text-muted-foreground on the Spinner. The title and description stay in ItemContent. The media slot does not set the icon's size.

How do I stop the spin for reduced motion?

Add motion-reduce:animate-none on the Spinner. The title and description stay, and the icon stops. The status role stays too.

All 17 spinner examples