PB-UIRegistry
Registry-native form inputs

Shape polished RHF experiences in minutes

A modern, registry-first library of React Hook Form inputs with Zod integration. Engineered for speed, clarity, and composability.

Browse componentsView registry
30+inputs shipped
RHFfirst-class
Zodready
Install in one command
bash
npx shadcn@latest add @pb-ui/input
Auto-installs dependencies
Typed, accessible, composable
Works with Base UI + Tailwind v4
CLI-ready

Form-native APIs

RHF controllers, labels, and errors are standardized so every input behaves consistently.

Zod in the loop

Schema validation, inline error text, and predictable types built in from the start.

Registry distribution

Install from the shadcn registry and tweak the code in your own repo, without fighting black boxes.

Stop writing the same boilerplate

See the difference between standard React Hook Form + shadcn/ui implementation versus using our pre-built wrappers.

Basic Input

Standard approach
tsx
<Controller
  control={form.control}
  name="username"
  render={({ field, fieldState }) => (
    <Field data-invalid={fieldState.invalid}>
      <FieldLabel>Username</FieldLabel>
      <Input
        {...field}
        placeholder="shadcn"
        aria-invalid={fieldState.invalid}
      />
      <FieldDescription>
        This is your public display name.
      </FieldDescription>
      {fieldState.invalid && (
        <FieldError errors={[fieldState.error]} />
      )}
    </Field>
  )}
/>
With PB-UI
One component
tsx
<InputField
  control={form.control}
  name="username"
  label="Username"
  placeholder="shadcn"
  description="This is your public display name."
/>

Date Picker

Standard approach
tsx
<Controller
  control={form.control}
  name="dob"
  render={({ field, fieldState }) => (
    <Field data-invalid={fieldState.invalid}>
      <FieldLabel>Date of birth</FieldLabel>
      <Popover>
        <PopoverTrigger render={
          <Button
            variant="outline"
            className={cn(
              "pl-3 w-[240px] font-normal text-left",
              !field.value && "text-muted-foreground"
            )}
            aria-invalid={fieldState.invalid}
          >
            {field.value ? (
              format(field.value, "PPP")
            ) : (
              <span>Pick a date</span>
            )}
            <CalendarIcon className="opacity-50 ml-auto size-4" />
          </Button>
        } />
        <PopoverContent className="p-0 w-auto" align="start">
          <Calendar
            mode="single"
            selected={field.value}
            onSelect={field.onChange}
            disabled={(date) =>
              date > new Date() || date < new Date("1900-01-01")
            }
            initialFocus
          />
        </PopoverContent>
      </Popover>
      {fieldState.invalid && (
        <FieldError errors={[fieldState.error]} />
      )}
    </Field>
  )}
/>
With PB-UI
One component
tsx
<DatePickerField
  control={form.control}
  name="dob"
  label="Date of birth"
  placeholder="Pick a date"
/>

Install once, ship everywhere

Point shadcn to the registry, add inputs on demand, and keep the code fully editable inside your project.

1

Configure the registry

Add the pb-ui registry URL to your components configuration.

json
"registries": {
  "@pb-ui": "https://pb-ui-five.vercel.app/registry/{name}"
}
2

Add inputs instantly

Use the CLI to bring in any component, with dependencies and examples included.

bash
npx shadcn@latest add @pb-ui/multi-select

Live previews, ready to drop in

Explore the catalog and copy the exact code you need for each input.

Input
Select
Tag input
DesignReactUX

Press Enter to add tags. Backspace removes the last tag.

Ready to build

Build your next form flow with confidence

Start with the registry, bring in the exact inputs you need, and ship forms that feel consistent across every surface.

Start browsingView registry index