Spinner Component
Accessible React spinner component with five sizes, theme-aware colors and a screen-reader label — built with Tailwind CSS.
Import
javascript
1import { Spinner } from "@neuctra/ui";Sizes
Loading…Loading…Loading…Loading…Loading…
Custom Color & Label
colorClassName accepts any text-* class; label is announced to screen readers.
Saving changes…Loading…
Props
All available props for the Spinner component.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Spinner diameter; stroke width scales with it |
| label | string | "Loading…" | Screen-reader-only status text |
| colorClassName | string | "text-primary" | Tailwind text color class for the stroke |
| labelClassName | string | — | Styles the visually-hidden (sr-only) accessible label. |
Accessibility
- Renders role="status" with a visually hidden label, so loading is announced.
- The spinning circle itself is aria-hidden.
Frequently Asked Questions
How do I install and import the Spinner component?
Install the @neuctra/ui package, then import it with: import { Spinner } from "@neuctra/ui";
What variants and sizes does Spinner support?
Spinner supports sizes: xs, sm, md, lg, xl. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Spinner component accessible?
Spinner is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.