snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/content/docs/components/radix/spinner.mdx

@@ -0,0 +1,110 @@
+---
+title: Spinner
+description: An indicator that can be used to show a loading state.
+base: radix
+component: true
+---
+
+<ComponentPreview styleName="radix-nova" name="spinner-demo" />
+
+## Installation
+
+<CodeTabs>
+
+<TabsList>
+  <TabsTrigger value="cli">Command</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add spinner
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps className="mb-0 pt-2">
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource
+  name="spinner"
+  title="components/ui/spinner.tsx"
+  styleName="radix-nova"
+/>
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</CodeTabs>
+
+## Usage
+
+```tsx
+import { Spinner } from "@/components/ui/spinner"
+```
+
+```tsx
+<Spinner />
+```
+
+## Customization
+
+You can replace the default spinner icon with any other icon by editing the `Spinner` component.
+
+<ComponentPreview styleName="radix-nova" name="spinner-custom" />
+
+```tsx showLineNumbers title="components/ui/spinner.tsx"
+import { cn } from "cn"
+import { LoaderIcon } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <LoaderIcon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
+```
+
+## Size
+
+Use the `size-*` utility class to change the size of the spinner.
+
+<ComponentPreview styleName="radix-nova" name="spinner-size" />
+
+## Button
+
+Add a spinner to a button to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
+
+<ComponentPreview styleName="radix-nova" name="spinner-button" />
+
+## Badge
+
+Add a spinner to a badge to indicate a loading state. Place the `<Spinner />` before the label with `data-icon="inline-start"` for a start position, or after the label with `data-icon="inline-end"` for an end position.
+
+<ComponentPreview styleName="radix-nova" name="spinner-badge" />
+
+## Input Group
+
+<ComponentPreview styleName="radix-nova" name="spinner-input-group" />
+
+## Empty
+
+<ComponentPreview styleName="radix-nova" name="spinner-empty" />
+
+## RTL
+
+To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
+
+<ComponentPreview styleName="radix-nova" name="spinner-rtl" direction="rtl" />