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
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 use Base UI primitives from @base-ui/react 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.