An indicator that can be used to show a loading state.
Installation
npx shadcn@latest add @caprice/spinnernpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };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 />} />