npm install @thrivecart/uiyarn add @thrivecart/uipnpm add @thrivecart/uibun add @thrivecart/uiimport { Spinner } from '@thrivecart/ui';Available from extra small to extra large
<div className="flex items-center gap-4">
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
</div>Spinner with visible descriptive text
<Spinner size="md" label="Loading contacts..." showLabel />Tell users what is loading when the spinner is the primary content indicator.
Use xs/sm for inline or button loading, md/lg for section loading, xl for full-page.
If you know the content shape, use Skeleton instead for a smoother experience.
Prefer localized spinners over full-page overlays when possible.
role="status" to announce loading state to screen readers.label prop provides aria-label for context.