An indicator that can be used to show a loading state.
Installation
npx shadcn@latest add @caprice/spinnerpnpm dlx shadcn@latest add @caprice/spinneryarn dlx shadcn@latest add @caprice/spinnerbunx shadcn@latest add @caprice/spinnernpm install @caprice-ui/reactpnpm add @caprice-ui/reactyarn add @caprice-ui/reactbun add @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactpnpm add @base-ui/react lucide-reactyarn add @base-ui/react lucide-reactbun add @base-ui/react lucide-reactAdd a cn helper
import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';
export const { cva, cx: cn } = defineConfig({
cx: merge,
});
export type { VariantProps };
export { getSchema };
Copy and paste the following code into your project.
import { mergeProps, useRender } from '@base-ui/react';
import { Loader2Icon } from 'lucide-react';
import { cn } from '@/lib/utils';
export namespace Spinner {
export type Props = useRender.ComponentProps<'svg'>;
}
/**
* A loading spinner.
* Renders a `<svg>` element.
*
* Documentation: [Caprice UI Spinner](https://caprice-ui.com/docs/components/spinner)
*/
export function Spinner({ className, render = <Loader2Icon />, ...props }: Spinner.Props) {
const defaultProps: useRender.ElementProps<'svg'> = {
role: 'status',
'aria-label': 'Loading',
className: cn('size-4 animate-spin', className),
};
return useRender({
render,
props: mergeProps<'svg'>(defaultProps, props),
});
}
Update the import paths to match your project setup.
Usage
import { Spinner } from "@/components/caprice-ui/spinner"import { Spinner } from "@caprice-ui/react/spinner"<Spinner />Customization
You can replace the default spinner icon with any other icon by passing an icon to the render prop of the Spinner component.
<Spinner render={<LoaderIcon />} />Last updated on