Components
Loading preview...
Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pagination, etc. A recreation of Vercel's Geist design system.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/spinnerimport React from "react";
import { Spinner } from "@/components/ui/spinner";
export const Default = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner />
</div>
</div>
);
};
export const CustomSize = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner size={30} />
</div>
</div>
);
};
export const CustomColor = () => {
return (
<div className="min-h-[100vh] flex flex-col gap-10 items-center justify-center pb-4">
<div className="flex flex-col gap-5 w-[60%]">
<Spinner color="red" />
</div>
</div>
);
};