[Bug]: Number Field Input does not match other inputs styles

[Abdo-reda]

Reproduction

https://github.com/Abdo-reda/shadcn-number-field-styles

Describe the bug

Description

Currently, the Number Field input styles doesn't match the remaining input components styles (like the Input, Textarea, SelectTrigger components for example). The main differences I noticed are the shadows, background, and focus-visible ring.

I included pictures below to show these differences. I think this may be because the number field is not part of the shadcn component library anymore, however I still think its important to try and maintain a consistent look in all input/form fields.

Suggested Changes

• changed shadown-sm to shadow-xs
• added dark:bg-input/30
• updated focus-visible:ring-1 focus-visible:ring-ring to focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]

---

Current Styles

Light

Dark

Focus Visible Styles

---

Suggested Changes

Light

Dark

Focus Visible Styles

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics           
    Memory: 4.08 GB / 13.86 GB
  Binaries:
    Node: 23.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.2.8 - C:\Users\Abdo\.bun\bin\bun.EXE
  Browsers:
    Chrome: 141.0.7390.76
    Edge: Chromium (127.0.2651.74)
    Firefox: 133.0.3 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @vueuse/core: ^13.9.0 => 13.9.0
    reka-ui: ^2.5.1 => 2.5.1
    vue: ^3.5.22 => 3.5.22

Contributes

• [x] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests