Spinner
An indicator that shows something is loading.
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
export default function SpinnerDemo() {
return (
<Button disabled>
<Spinner /> Loading…
</Button>
);
}
Install
npx shadcn@latest add @madeui/spinnerUsage
import { Spinner } from '@/components/ui/spinner';Sizes
width and height are plain SVG attributes (like viewBox), so pass them
directly to resize the spinner.
import * as stylex from '@stylexjs/stylex';
import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';
export default function SpinnerSizes() {
return (
<div {...stylex.props(styles.row)}>
<Spinner width="12" height="12" />
<Spinner width="16" height="16" />
<Spinner width="24" height="24" />
<Spinner width="32" height="32" />
</div>
);
}
const styles = stylex.create({
row: {
alignItems: 'center',
display: 'flex',
gap: space.s4,
},
});
Composition
Spinner inherits currentColor, so it drops into any text-colored
container — a Badge, a line of body text, anywhere.
Syncing
Fetching the latest results…
import * as stylex from '@stylexjs/stylex';
import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';
export default function SpinnerComposition() {
return (
<div {...stylex.props(styles.stack)}>
<Badge variant="secondary">
<Spinner width="12" height="12" />
Syncing
</Badge>
<p {...stylex.props(styles.line)}>
<Spinner />
Fetching the latest results…
</p>
</div>
);
}
const styles = stylex.create({
stack: {
alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
gap: space.s4,
},
line: {
alignItems: 'center',
color: colors.mutedForeground,
display: 'flex',
gap: space.s2,
margin: 0,
},
});
API reference
An inline SVG with a spin animation, sized 16px and colored via currentColor — it inherits the surrounding text color (e.g. inside a Button). Accepts SVG props plus a style prop (StyleXStyles, merged last).