[bug]: hugeicons generator creates type error in Spinner component (strokeWidth mismatch)
Author: OfiroCreated Dec 20, 2025Updated Sep 17, 2026
Labelsbug
Describe the bug
When using iconLibrary: "hugeicons" in components.json, the CLI generates a Spinner component that fails TypeScript compilation immediately after installation.
The generator types the component props as React.ComponentProps<"svg">, which allows strokeWidth to be a string or number. It then spreads these props into the HugeiconsIcon component, which strictly expects strokeWidth to be a number.
This causes a mismatch because TypeScript correctly flags that we're passing a potentially invalid prop type (string) to the icon component.
Affected component/components
Spinner
How to reproduce
- Setup a project with components.json configured for hugeicons
- Run npx shadcn@latest add spinner.
- Try to build the project (npm run build)
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/8lzh5c
Logs
➜ next-app git:(main) ✗
➜ next-app git:(main) ✗ npx shadcn@latest add spinner
✔ Checking registry.
✔ Created 1 file:
- components/ui/spinner.tsx
➜ next-app git:(main) ✗ npm run build
> [email protected] build
> next build
⚠ Warning: Next.js inferred your workspace root, but it may not be correct.
We detected multiple lockfiles and selected the directory of /project/workspace/yarn.lock as the root directory.
To silence this warning, set `turbopack.root` in your Next.js config, or consider removing one of the lockfiles if it's not needed.
See https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#root-directory for more information.
Detected additional lockfiles:
* /project/workspace/shadcn/next-app/package-lock.json
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
▲ Next.js 16.1.0 (Turbopack)
Creating an optimized production build ...
✓ Compiled successfully in 5.7s
Running TypeScript .Failed to compile.
./components/ui/spinner.tsx:7:41
Type error: Type 'string | number' is not assignable to type 'number | undefined'.
Type 'string' is not assignable to type 'number'.
5 | function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
6 | return (
> 7 | <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
| ^
8 | )
9 | }
10 |
Next.js build worker exited with code: 1 and signal: null
➜ next-app git:(main) ✗
System Info
- shadcn CLI: 3.6.2
- @hugeicons/react: 1.1.3
- TypeScript: 5.x
- Style: base-maia
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues
Source: shadcn-ui/ui