Introduction

You know how most traditional component libraries work: you install a package from npm, import the components, and use them in your app.

This approach works well until you need to customize a component to fit your internal systems or require one that isn’t included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.

This is what Buildpad UI aims to solve. It is built around the following principles:

• Open Code: The top layer of your component code is open for modification.
• Schema-Driven: Components render dynamically from DaaS collection metadata — 40+ field interfaces auto-mapped.
• Distribution: A flat-file schema and command-line tool make it easy to distribute components.
• Permission-Aware: Field-level permissions enforced out of the box via DaaS RBAC.
• AI-Ready: Open code for LLMs to read, understand, and improve via MCP.

Open Code

Buildpad UI hands you the actual component code. You have full control to customize and extend the components to your needs. This means:

• Full Transparency: You see exactly how each component is built.
• Easy Customization: Modify any part of a component to fit your design and functionality requirements.
• AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.

In a typical library, if you need to change a form field’s behavior, you have to override styles or wrap the component. With Buildpad UI, you simply edit the component code directly.

Schema-Driven

Every component in Buildpad UI is designed to work with DaaS (Data-as-a-Service) collection schemas. VForm reads field metadata and automatically renders the correct interface — text inputs, selects, date pickers, relational selectors, file uploaders, and more.

The field-interface-mapper utility maps 40+ field types to the appropriate UI component. When you add collection-form via CLI, VForm and all dependent interface components are automatically included.

Distribution

Buildpad UI is also a code distribution system. It defines a schema for components and a CLI to distribute them.

• Schema: A flat-file structure (registry.json) that defines the components, their dependencies, and properties.
• CLI: A command-line tool to distribute and install components across projects with cross-framework support.
• Versioning: Per-file SHA-256 checksums track exactly what was installed so you can safely upgrade, detect local modifications, and view changelogs.

You can use the schema to distribute your components to other projects or have AI generate completely new components based on existing schema.

npx @buildpad/cli@latest init
npx @buildpad/cli@latest add collection-form
npx @buildpad/cli@latest bootstrap

Once components are installed you own the code — edit freely. When upstream releases a fix or new feature you can pull it in selectively:

# Check which installed components have newer versions
npx @buildpad/cli@latest outdated
 
# Upgrade all components (prompts per file when locally modified)
npx @buildpad/cli@latest upgrade --all
 
# See what changed since your installed version
npx @buildpad/cli@latest changelog input

Permission-Aware

Buildpad UI integrates deeply with DaaS RBAC. VForm automatically filters fields based on user permissions for create, update, and read actions. The usePermissions hook provides field-level and action-level permission checking.

import { VForm } from '@/components/ui/vform/VForm';
 
<VForm
  collection="articles"
  fields={fields}
  modelValue={values}
  onUpdate={handleChange}
  enforcePermissions={true}
  action="update"
/>

A standalone VForm with relational fields (O2M, M2M, M2A) needs the relational provider for its create / select / edit dialogs. The scaffolded authenticated layout already supplies it; elsewhere, wrap the form in CollectionsRelationalProvider from @/components/ui/collections-relational-provider. See Architecture.

AI-Ready

The design of Buildpad UI makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.

The MCP enables AI assistants like VS Code Copilot, Kiro, and Claude Code to discover components, read source code, generate forms, and install components — all through natural language.

An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design.

Component Library

Buildpad UI provides a comprehensive set of components organized by category: