Skip to main content

Spinner

Show active processes. Simple, clear feedback. Prevent duplicate actions.

default.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Installation

pnpm dlx nachui add spinner

Anatomy

1import { Spinner } from '@/components/ui/spinner';
1<Spinner />

Examples

Default

default.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3export default function SpinnerDefault() {
4  return (
5    <div className="flex items-center justify-center py-8">
6      <Spinner />
7    </div>
8  );
9}

Sizes

You can change the size of the spinner using the size prop.
sizes.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3const sizes = ['sm', 'md', 'lg', 'xl'] as const;
4

5export default function SpinnerSizes() {
6  return (
7    <div className="flex items-end justify-center gap-6 py-8">
8      {sizes.map((size) => (
9        <Spinner key={size} size={size} />
10      ))}
11    </div>
12  );
13}

Variants

You can change the color of the spinner using the variant prop.
variants.tsx
1import { Spinner } from '@repo/ui/components/spinner';
2

3const variants = [
4  'default',
5  'primary',
6  'muted',
7  'success',
8  'destructive',
9  'warning',
10  'info',
11] as const;
12

13export default function SpinnerVariants() {
14  return (
15    <div className="flex flex-wrap justify-center gap-4 py-8">
16      {variants.map((variant) => (
17        <Spinner key={variant} variant={variant} />
18      ))}
19    </div>
20  );
21}

API Reference

Spinner

PropTypeDefaultDescription
size'sm' | 'md' | 'lg' | 'xl''md'The size of the spinner
variant'default' | 'primary' | 'muted' | 'success' | 'destructive' | 'warning' | 'info''default'Visual style
classNamestring-Additional CSS classes
Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue
PreviousSkeleton
NextSwitch