Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.8K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.2
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Color Picker
  • Data Grid
  • Date Selector
  • Emoji Picker
  • Event Calendar
  • File Type
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Application

  • App ShellAdded an observability console app shell
  • Auth
  • Card
  • Dashboard
  • DialogAdded a duplicate contact check dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • BaseAdded an API request logs grid, and 2 grids were rebuilt
  • AdvancedAdded 12 new Data Grid Advanced blocks, 17 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area Chart
  • Bar Chart
  • Composed ChartChart 36 is now an operating margin chart
  • Line Chart
  • Pie ChartAdded a cloud spend budget rose
  • Radial Chart
  • Sankey Chart
  • Slope Chart
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageAdded 2 new AI Usage blocks, 4 in all

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • BillingAdded a tenant billing settings block
  • BookingsAdded a hotel room board, and the salon front desk was rebuilt
  • Files
  • Inventory
  • MapNew Map category with a fleet dispatch map
  • TravelNew Travel category with 2 blocks for event travel operators
  • UsersAdded a team access settings block
  • Digital Twin

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.8K

Shadcn Number Field

PreviousNext

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

Base UIRadix UI
Radix UI
API Reference

Installation

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

Usage

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from

Shadcn Number Field Free 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.

KanbanPhone Input

On This Page

InstallationUsageFor AI AgentsExamplesSizeWith Action ButtonsWith Extended Message
"@/components/ui/number-field"
<NumberField defaultValue={0}>
  <NumberFieldScrubArea label="Quantity" />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

  • Quantities, amounts and counts stepped up or down by buttons inside a min and max range
  • Compact numeric settings whose label scrubs the value when dragged sideways
  • Validated amounts in a React Hook Form form, checked by a zod schema with the error shown below

When not to use

  • Free text such as a name, an email or an order ID, with nothing to step: use the Input component
  • A full plans comparison with tier prices and a seat count to adjust: use the Pricing blocks
  • A record entry page with many controls, such as a product with price and stock: use the Form blocks

Agent notes

  • onValueChange receives null when the input is cleared, so type a controlled value as a number or null
  • Set aria-invalid on NumberFieldGroup to turn its border destructive; a shadcn Field marked invalid only recolors text
  • An outside label must point htmlFor at the id passed to NumberField, which Base UI sets on the input

Third-party API docs

  • Base UI v1: API reference, docs, llms.txt
Markdownhttps://reui.io/docs/components/radix/number-field.md
MCPget_component("number-field")
Installnpx shadcn@latest add @reui/number-field
Full index for agents:llms.txtReUI MCP setup

Examples

Size

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/reui/number-field"

export function Pattern() {
  return (
    <div className="w-full max-w-48">
      <NumberField defaultValue={5} min={0} max={100} size="sm">
        <NumberFieldScrubArea label="Small" />
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
    </div>
  )
}

With Action Buttons

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/reui/number-field"

export function Pattern() {
  return (
    <div className="w-full max-w-48">
      <NumberField defaultValue={5} min={0} max={100} size="lg">
        <NumberFieldScrubArea label="Large" />
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
    </div>
  )
}

With Extended Message

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/reui/number-field"

export function Pattern() {
  return (
    <div className="w-full max-w-48">
      <NumberField defaultValue={5} min={0} max={100}>
        <NumberFieldScrubArea label="Amount" />
        <NumberFieldGroup>
          <NumberFieldInput className="text-left" />
          <NumberFieldDecrement className="rounded-none!" />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
    </div>
  )
}

import {
  NumberField,
  NumberFieldDecrement,
  NumberFieldGroup,
  NumberFieldIncrement,
  NumberFieldInput,
  NumberFieldScrubArea,
} from "@/components/reui/number-field"

export function Pattern() {
  return (
    <div className="w-full max-w-48">
      <NumberField defaultValue={5} min={0} max={100}>
        <NumberFieldScrubArea label="Amount" />
        <NumberFieldGroup>
          <NumberFieldDecrement />
          <NumberFieldInput />
          <NumberFieldIncrement />
        </NumberFieldGroup>
      </NumberField>
    </div>
  )
}