diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
index f95faae0f9..b3f86b1efc 100644
--- a/apps/docs/content/docs/components/spinner.mdx
+++ b/apps/docs/content/docs/components/spinner.mdx
@@ -62,16 +62,16 @@ Spinner express an unspecified wait time or display the length of a process.
 
 ### Variants
 
-<CodeDemo title="Label colors" files={spinnerContent.variants} />
+<CodeDemo title="Variants" files={spinnerContent.variants} />
 
 ## Slots
 
 - **base**: The base slot of the spinner, it wraps the circles and the label.
 - **wrapper**: The wrapper of the circles.
-- **circle1**: The first circle of the spinner. (Effective only when variant is `default` or `gradient`)
-- **circle2**: The second circle of the spinner. (Effective only when variant is `default` or `gradient`)
-- **dots**: Dots of the component. (Effective only when variant is `dots` or `dots-blink`)
-- **bars**: Bars of the component. (Effective only when variant is `bars`)
+- **circle1**: The first circle of the spinner component. (Effective only when variant is `default` or `gradient`)
+- **circle2**: The second circle of the spinner component. (Effective only when variant is `default` or `gradient`)
+- **dots**: Dots of the spinner component. (Effective only when variant is `dots` or `dots-blink`)
+- **bars**: Bars of the spinner component. (Effective only when variant is `bars`)
 - **label**: The label content.
 
 <Spacer y={4} />
diff --git a/packages/components/spinner/src/use-spinner.ts b/packages/components/spinner/src/use-spinner.ts
index 6c456e394a..ff59b0ec98 100644
--- a/packages/components/spinner/src/use-spinner.ts
+++ b/packages/components/spinner/src/use-spinner.ts
@@ -37,7 +37,7 @@ export type UseSpinnerProps = Props & SpinnerVariantProps;
 
 export function useSpinner(originalProps: UseSpinnerProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, spinner.variantKeys);
-  const {variant} = originalProps;
+  const variant = originalProps.variant ?? "default";
 
   const {children, className, classNames, label: labelProp, ...otherProps} = props;
 
diff --git a/packages/components/spinner/stories/spinner.stories.tsx b/packages/components/spinner/stories/spinner.stories.tsx
index 79c40e0bef..d9dcb2f020 100644
--- a/packages/components/spinner/stories/spinner.stories.tsx
+++ b/packages/components/spinner/stories/spinner.stories.tsx
@@ -26,6 +26,12 @@ export default {
       },
       options: ["sm", "md", "lg"],
     },
+    variant: {
+      control: {
+        type: "select",
+      },
+      options: ["default", "gradient", "star", "dots", "dots-blink"],
+    },
   },
   decorators: [
     (Story) => (