pb-ui-registry

A React Hook Form input collection with Zod integration, delivered as a modern, high-performance registry for pb-ui compatible components, built with Next.js 16, Tailwind CSS v4, and Base UI.

---

pb-ui-registry provides a visual gallery and a programmatic API for distributing React Hook Form inputs with Zod-ready validation patterns. It is designed to work seamlessly with the shadcn CLI, allowing for instant installation of complex input components and their dependencies.

⚡ Quick Start

1. Configure the registry

Add the @pb-ui registry to your components.json:

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

2. Install components

Install any React Hook Form input directly into your project using the shadcn CLI:

# Example: Adding the Multi-Select component
npx shadcn@latest add @pb-ui/multi-select

Tip

You can browse all available components and their interactive previews at pb-ui-five.vercel.app/components.

✨ Key Features

• RHF + Zod First-Class Support: A comprehensive set of React Hook Form inputs with Zod-friendly validation patterns and types.
• Tailwind CSS v4: Built from the ground up to leverage the latest CSS-only theming and performance improvements.
• Base UI & RAC: Uses @base-ui/react and react-aria-components for accessible, unstyled foundations.
• CLI-Ready: Fully compatible with the shadcn CLI for automated dependency management and installation.
• Interactive Previews: Every component in the registry includes multiple usage examples and live previews.

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• UI Primitives: @base-ui/react, Radix UI, React Aria Components
• Styling: Tailwind CSS v4
• Icons: Lucide React
• Forms: React Hook Form & Zod

🚀 Development

Prerequisites

• Node.js 18.17.0 or later
• pnpm 8.x or later (recommended)

Getting Started

1. Clone the repository

   git clone https://github.com/violabg/pb-ui-registry.git
   cd pb-ui-registry

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Sync the registry After making changes to components or the registry definitions in lib/registry.ts, run the build command to update the JSON files for the CLI:

   pnpm registry:build

📂 Project Structure

• app/: Next.js App Router routes and page definitions.
• components/ui/: The source code for the registry components.
• components/examples/: Usage examples for the component previews.
• lib/registry.ts: The source of truth for all registry items and their metadata.
• public/r/: Generated JSON registry files served to the CLI.

---

Important

This registry is maintained as an open-source project. Always review component source code before adding it to production environments.