Project Setup

The Quick Start wrote a field component by hand. In practice, most consumers start from Prism's own copy-in primitives and field components, installed once and then edited freely. This page covers that path.

Initialize your projectCopy Anchor Link

From the root of an existing React or Next.js project (anywhere with a package.json):

npx prismrepo init

This writes:

• prism.json, Prism's own config (not shadcn/ui's components.json): the import alias add rewrites templates to (default @/components/prism), where Layer 1 primitives and Layer 2 field components go, and which global CSS file received Prism's design tokens.
• components/prism/fields/registry.ts, a starting, empty defineRegistry({}) call, only if you don't already have one.
• Prism's CSS variable tokens, appended to your detected global stylesheet (app/globals.css for a Next.js App Router project; a few other common locations are checked too), wrapped in marker comments so re-running init never duplicates them.

Re-running init without --force when prism.json already exists is a no-op: it prints a message and changes nothing. Your installed components and registry.ts are never touched.

Add a field componentCopy Anchor Link

npx prismrepo add text-field

This installs text-field.tsx into components/prism/fields/, and automatically installs the Layer 1 primitives it depends on (label.tsx, input.tsx) into components/prism/ui/, each with its import alias rewritten to your configured path. It then updates registry.ts for you through an AST-aware edit, not a text rewrite, adding the import and the text: TextField entry without touching anything else already in the file.

Finally, it reports (and, by default, installs) whatever npm dependencies are missing: @prismrepo/core, @prismrepo/react, @prismrepo/forms, @prismrepo/adapter-rhf, and react-hook-form. Pass --no-install to only see the command instead of running it, or --dry-run to preview every file and dependency change with nothing actually written.

Install several items at once:

npx prismrepo add number-field select-field checkbox-field date-field

It's yoursCopy Anchor Link

Every installed file is a real, editable file in your project, not a reference to a package. Edit components/prism/ui/input.tsx to change how every field built on it looks; edit components/prism/fields/text-field.tsx to change what TextField does. Re-running prismrepo add text-field later is always safe:

• If you never touched the installed files, it's a no-op, or a clean update if Prism shipped a newer template.
• If you edited them, prismrepo detects that and refuses to overwrite your changes, explaining exactly which file and why. Pass --force only if you actually want to discard your edits.

Checking what's installedCopy Anchor Link

npx prismrepo list

Shows every installable Layer 1 primitive and Layer 2 field component, and whether each is currently installed in your project.

See CLI for the complete command reference, and Your First Form to put the installed components to use.