Installation

Requirements, the two commands that install a Forme component, and exactly which files land where.

Forme needs React 18 or 19, Tailwind CSS v4 and TypeScript. There is no package to add: installing a component is copying a file.

Requirements#

Node 20 or newer
React 18 or 19
Tailwind CSS v4, with @tailwindcss/postcss in your PostCSS config
A components.json, because that is how shadcn resolves your aliases

Add a component#

json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@forme": "https://formeui.com/r/registry.json"
  }
}

Then install anything from the catalog:

bash

npx shadcn@latest add @forme/button

The first install also pulls forme-foundation, the registry item every Forme component depends on. It is not a component: it is the token file plus a small motion module.

What lands on disk#

File	Why
`@components/forme/button/button.tsx`	The component.
`@components/forme/lib/cn.ts`	The `cn()` helper every component imports.
`@components/forme/lib/motion.ts`	Shared motion presets.
`@components/forme/foundation.css`	The tokens. You import this yourself.

Every Forme file lands under one forme/ folder inside your components alias, and imports between Forme files are relative. Your project does not need to know how Forme is laid out internally.

Wire up the tokens#

Foundation has to be imported after Tailwind, in your global stylesheet:

css

@import "tailwindcss";
@import "./components/forme/foundation.css";

That is the whole setup. There is no Tailwind config to extend and no plugin to register, because the tokens are CSS variables and Tailwind v4 reads those directly. If you are on Tailwind v3, see Tailwind.

Installing by hand#

Every component page shows its full source with a copy button, so you can also just paste the file. Copy it into your components folder, copy lib/cn.ts next to it if you do not have it, and you are done.