Getting started

1. Add the components

npx prongs add
npm install @prongsjs/core @prongsjs/ui tailwind-merge

add copies components and a starter registry into components/prongs, and writes prongs.json. In a Next.js project it also points links at next/link. The files are yours: edit them like any other code.

It also writes theme.css, the colours the registry uses, and imports it into your global CSS right after Tailwind. If you already define these colours, your own values win. It adds surfaces that layer themselves; see Theme and surfaces.

2. Build a page

import { Action, Field, Layout, Text } from '@/components/prongs';

export default function SignIn() {
  return (
    <Layout intent="layout.task">
      <Text intent="heading.page">Sign in</Text>
      <Layout intent="layout.form">
        <Layout intent="layout.field">
          <Text intent="text.label" as="label" htmlFor="email">Email</Text>
          <Field intent="field.email" id="email" />
        </Layout>
        <Action intent="action.submit">Sign in</Action>
      </Layout>
    </Layout>
  );
}

Each intent decides the element too: layout.task renders <main>, layout.form renders <form>, field.email sets type, inputMode and autoComplete, and action.submit is a type="submit" button.

3. Add errors and logs

npx prongs add logs     # audit, security, incident, job and debug intents, plus log()
npx prongs add errors   # request, auth, record, conflict, failure… intents, plus fail()
npm install @prongsjs/errors @prongsjs/logs

The same idea, past the UI. Logs apply anywhere code runs; errors apply where something answers a request, and add logs too. Every failure then gets the right status and message, and every event the right level. The Errors and Logs guides explain the rest.

4. Check it

npx prongs check

check reports unknown intents, intents on the wrong component, styled raw elements, visual inline styles and more, each with a suggested fix. Adding Prongs to an app that already exists? Record today’s findings first, so only new ones fail:

npx prongs check --update-baseline
npx prongs check --suggest   # repeated problems, grouped into intents worth adding
npx prongs add-intent action.archive --refs control.secondary --description "..."   # add one of your own

5. Teach your agents

npx prongs spec --agents    # PRONGS.md, plus a short block in AGENTS.md and CLAUDE.md
npx prongs install-hooks    # check every file Claude Code or Cursor edits

With hooks installed, an agent that writes a styled <button> is told, right after the edit, to use <Action> and which intents fit.

6. See your intents

npx prongs add gallery

Adds a page (at /prongs in Next.js, development only) that renders every intent in your registry live, in your own theme, with its states and its “not for… use instead” links. It reads the registry at runtime, so it is never out of date.