ReUIReUI
2.7kX

Shadcn Number Field

Custom Shadcn Number Field for React and Tailwind CSS. A numeric input element with increment and decrement buttons, and a scrub area.

Radix UIBase UI
Radix UI
API Reference 
import {
  NumberField,
  NumberFieldDecrement,

Installation

pnpm dlx shadcn@latest add @reui/number-field

Usage

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/ui/number-field"
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Examples

Size

import {
  NumberField,
  NumberFieldDecrement,

With Action Buttons

import {
  NumberField,
  NumberFieldDecrement,

With Extended Message

import {
  NumberField,
  NumberFieldDecrement,

More Shadcn Number Field components

Browse 6 production-ready Shadcn Number Field components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 6 Shadcn Number Field components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.