Skip to Content
Prism UI
Core Concepts

What is Prism?

The problem Prism solves and the developer experience it delivers.

The problem

Teams building internal tools, admin panels, and data-heavy applications in React repeatedly write the same glue code:

  • A Zod schema, a React Hook Form useForm call, a Controller per field, and a UI component per field type, repeated for every form in the app, with no shared contract between a field's declared type and the component rendering it.
  • Ad hoc "field registries" (large switch statements or lookup objects) that map a field "type" string to a component, with no compile-time guarantee that the component receives the props it expects, or that its value type matches the form field's value type.
  • Copy-pasted provider/context setup, each app slightly different, none interoperable.

The Prism developer experience

With Prism, a consumer:

  1. Installs a small set of Prism-owned, Tailwind-based UI primitives into their own repo via a CLI, and edits them freely afterward, see CLI.
  2. Wraps those primitives (or any other UI library) into field components that accept Prism's normalized field-binding contract, see Custom Fields.
  3. Registers those field components in a typed registry, see Registry System.
  4. Builds a form configuration against that registry and gets full TypeScript inference, rejecting mismatched props, mismatched value types, and invalid field paths at compile time instead of at runtime, see Forms.
  5. Reaches into the underlying react-hook-form API at any time, for anything Prism's configuration surface doesn't cover, see React Hook Form Integration.

Core principles

  1. Configuration-driven developer experience. A form is declared as data, not assembled by hand field by field.
  2. Strong TypeScript inference. A field's configuration is checked against its component's actual value type, not just that a type string exists.
  3. Bring Your Own Library (BYOL). Prism integrates libraries you already chose, it doesn't replace them.
  4. No black-box abstractions. Every layer preserves direct access to the library underneath it.
  5. Preserve access to underlying library APIs. usePrismForm returns the complete, unmodified React Hook Form object.
  6. Modular packages and tree-shaking. Six focused packages, not one monolith.
  7. No unnecessary runtime dependencies. @prismrepo/core has zero.
  8. No hidden global mutable registries. defineRegistry is a plain function, not a module-level side effect.
  9. Provider isolation. Multiple independent PrismProviders never leak configuration into one another.
  10. Static configuration stays separate from mutable runtime state. A FormDefinition is immutable; form state lives in React Hook Form.
  11. Consumer customization is a first-class capability. Installed primitives are yours to edit, not a package to fork.
  12. Prefer integrating mature libraries over reinventing them. React Hook Form and Zod do the hard work; Prism connects them.
  13. Accessibility is a requirement, not a future enhancement. Correct ARIA wiring, keyboard operability, and visible focus state ship in every Prism-authored primitive.
  14. Architecture decisions are documented and tested, see Architecture Overview.

On this page