Ouro HX

Feedback

Spinner

A spinning ring that says something is loading. Screen readers hear its label as a status; with reduced motion it pulses instead of spinning.

LoadingLoading recipesLoading

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

In its source: app/components/recipe/RecipeHeader.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/spinner#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/spinner

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/spinner#v1.2.13 ourostack/ouro-ui/spinner-tests#v1.2.13
import { Spinner } from "@/components/ouro/spinner/spinner";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<Spinner />
<Spinner label="Loading recipes" size="lg" tone="primary" />

Use instead when

  • Use Button's loading instead when the wait follows a press, Progress when you know how far along the work is, and Skeleton to hold the place of content that is loading.

Props

Type: SpinnerProps.

className
Type: string
Layout only: margins, alignment in a flex row (ms-2). Appearance classes warn in development; use tone and size.
label
Type: string
Default: "Loading"
What is loading, for screen readers: "Loading recipes". It is not shown; put visible text next to the spinner when you want one.
ref
Type: Ref<HTMLSpanElement>
Reaches the rendered element.
size
Type: "sm" | "md" | "lg"
Default: "md"
The spinner's size: 16px, 20px or 32px. To match running text, use sm.
tone
Type: "primary" | "secondary" | "destructive" | "success" | "warning"
Color role from the theme, named after its token. Without a tone the spinner takes the surrounding text color, so it matches the button or text it sits in. secondary is the muted foreground.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

  • color: Not a prop. Ouro UI uses tone: <Spinner tone="primary">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Source on GitHubThis page as Markdown