Spinner
A shadcn-style spinner component built with Ark UI primitives.
import { Spinner } from "@/components/ui/spinner";
const SpinnerDemo = () => <Spinner className="size-6" />;
export default SpinnerDemo;
Installation
npx shadcn@latest add @ark-cn/spinnerInstall the dependency required by this primitive:
npm install @ark-ui/react lucide-reactCopy the component source into your app:
TSXcomponents/ui/spinner.tsx
"use client";
import { Loader2Icon } from "lucide-react";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export const Spinner = ({
className,
...props
}: ComponentProps<typeof Loader2Icon>) => {
return (
<Loader2Icon
aria-label="Loading"
className={cn("animate-spin", className)}
role="status"
{...props}
/>
);
};
Update import aliases to match your project setup.
Usage
import * as Spinner from "@/components/ui/spinner"Read exported parts in src/components/ui/spinner.tsx and compose the primitive according to the Ark UI pattern for this component.
Examples
import { Spinner } from "@/components/ui/spinner";
const SpinnerDemo = () => <Spinner className="size-6" />;
export default SpinnerDemo;
API reference
This component mirrors the upstream Ark UI primitive.
See the ARK UI documentation for the full API.