shadcn.io is an independent project built on shadcn/ui
A muted line leads with a 12px spinner and then reads Syncing your changes. Both share the muted color. No sync is running.
Use it for background work that should stay quiet. Lead with the words if the sentence matters more. A layout that is still arriving can use a Skeleton. In Svelte, Ark UI labels the spinner Loading.
Installation
Anatomy
Usage
<p class="flex items-center gap-2 text-muted-foreground text-sm"><Spinner class="size-3" />Syncing your changes</p>FAQ
Why is the spinner before the words?
The Spinner is the first child of the paragraph, and the text "Syncing your changes" is the second. The p is a flex row, so that DOM order is the visual order.
Why are the spinner and the text both muted?
text-muted-foreground is on the p, not on the spinner. The icon uses currentColor, so it picks up the paragraph's text color along with the words.
What size is the spinner next to Syncing your changes?
size-3 (12px) on the Spinner, and text-sm on the paragraph. items-center aligns them, and gap-2 is the space between.
Why is this a paragraph?
The status is one line of text, so the file uses a p with flex on it. The spinner is an SVG inside that paragraph, with role="status".
API Reference
Spinner
No extra props in this demo. The rest is on the Spinner page.
