Number Input

npx shadcn@latest add https://ui.saasflare.io/r/number-input.json

pnpm add @saasflare/ui

"use client"import { useState } from "react"import { Label, NumberInput } from "@saasflare/ui"/** A numeric input with stepper buttons and min/max clamping. */export function Demo() {    const [seats, setSeats] = useState(3)    return (        <div className="flex flex-col gap-2 w-full max-w-[12rem]">            <Label>Team seats</Label>            <NumberInput value={seats} onChange={setSeats} min={1} max={20} step={1} />        </div>    )}

"use client"import { useState } from "react"import { Label, NumberInput } from "@saasflare/ui"/** Disabled input and a variant with the steppers hidden. */export function Demo() {    const [rate, setRate] = useState(2)    return (        <div className="flex flex-col gap-4 w-full max-w-[14rem]">            <div className="flex flex-col gap-2">                <Label>Included seats (disabled)</Label>                <NumberInput value={5} disabled />            </div>            <div className="flex flex-col gap-2">                <Label>Rate limit (no steppers)</Label>                <NumberInput value={rate} onChange={setRate} min={1} hideSteppers />            </div>        </div>    )}