Spinner

A continuously rotating element indicating loading state.

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 mateui add spinner

Anatomy

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

1<Spinner />

Examples

Default

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.

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerSizes() {
4  return (
5    <div className="flex items-end justify-center gap-6 py-8">
6      <Spinner size="sm" />
7      <Spinner size="md" />
8      <Spinner size="lg" />
9      <Spinner size="xl" />
10    </div>
11  );
12}

Variants

You can change the color of the spinner using the variant prop.

1import { Spinner } from '@repo/ui/components/spinner';
2
3export default function SpinnerVariants() {
4  return (
5    <div className="flex flex-wrap justify-center gap-4 py-8">
6      <Spinner variant="default" />
7      <Spinner variant="primary" />
8      <Spinner variant="muted" />
9      <Spinner variant="success" />
10      <Spinner variant="destructive" />
11      <Spinner variant="warning" />
12      <Spinner variant="info" />
13    </div>
14  );
15}

API Reference

Spinner

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The size of the spinner
`variant`	`'default' \| 'primary' \| 'muted' \| 'success' \| 'destructive' \| 'warning' \| 'info'`	`'default'`	Visual style
`className`	`string`	-	Additional CSS classes

PreviousSkeleton NextSwitch