Skip to content
Lenso UI

Spinner

Migration guide for Spinner from HeroUI v2 to v3

Refer to the v3 Spinner documentation for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.

Structure Changes

In v2, Spinner supported multiple variants and labels:

import { Spinner } from "@lenso/ui";
export default function App() {  return <Spinner variant="default" label="Loading..." color="primary" />;}

In v3, Spinner is simplified to a single circular variant:

import { Spinner } from "@lenso/ui";
export default function App() {  return <Spinner color="accent" />;}

Key Changes

1. Component Behavior

v2: Supported multiple variants (default, simple, gradient, wave, dots, spinner) and labels
v3: Single circular spinner variant, no label support

2. Prop Changes

v2 Propv3 LocationNotes
label—Add label manually with separate element if needed
variant—Only one spinner variant available
labelColor—No label support
classNames—Use className prop directly
sizesizeChanged: "sm" | "md" | "lg" → "sm" | "md" | "lg" | "xl"
colorcolorChanged values (see below)

3. Changed Color Values

  • "default" → "current" (inherits current text color)
  • "primary" → "accent"
  • "secondary" → Removed (use "current" or "accent")
  • "success", "warning", "danger" → Still available

Migration Examples

With Label

{/* Simple label */}<Spinner label="Loading..." />
{/* With label color and custom styling */}<Spinner  label="Loading..."  labelColor="primary"  classNames={{    label: "text-foreground mt-4"  }}/>

Sizes and Colors

{/* Sizes */}<div className="flex gap-4">  <Spinner size="sm" />  <Spinner size="md" />  <Spinner size="lg" /></div>
{/* Colors */}<div className="flex gap-4">  <Spinner color="default" />  <Spinner color="primary" />  <Spinner color="secondary" />  <Spinner color="success" />  <Spinner color="warning" />  <Spinner color="danger" /></div>

Variants (Removed)

<div className="flex gap-4">  <Spinner variant="default" />  <Spinner variant="simple" />  <Spinner variant="gradient" />  <Spinner variant="wave" />  <Spinner variant="dots" />  <Spinner variant="spinner" /></div>

Color Mapping

When migrating colors, use this mapping:

v2 Colorv3 ColorNotes
"default""current"Inherits current text color
"primary""accent"Use accent color
"secondary""current" or "accent"Use current or accent
"success""success"No change
"warning""warning"No change
"danger""danger"No change

Summary

  1. No Label Support: label prop removed - add label manually if needed
  2. No Variants: variant prop removed - only one circular spinner available
  3. No Label Color: labelColor prop removed - style label manually
  4. Color Values Changed: "default" → "current", "primary" → "accent", "secondary" removed
  5. Size Added: New "xl" size option available
  6. ClassNames Removed: Use className prop directly