Choosing packages
Choose the Systhema packages for HTML, React, Next.js or a CMS-driven site.
On this page
Install the packages your application uses. All published @systhemaui/* packages share one version; keep them aligned.
Package rolesLink to this section
| Package | Role | Canonical documentation |
|---|---|---|
@systhemaui/core | Tokens, Tailwind CSS, generated types and the local systhema-core CLI | Core reference |
@systhemaui/react | Framework-independent React components and listeners | Components |
@systhemaui/next | Next.js component twins, provider and routing helpers | Next.js |
@systhemaui/payload | Payload configuration, blocks, editors and public rendering | Payload |
@systhemaui/cli | Global systhema commands for consumer projects | CLI |
@systhemaui/figma | Standalone Figma plugin distributed to licensed teams | Figma plugin |
React uses core; Next uses core and React; Payload uses all three. The Next package re-exports components that do not need a Next.js twin. Import from @systhemaui/next in a Next.js application.
HTML without ReactLink to this section
pnpm add @systhemaui/core tailwindcss @tailwindcss/cliUse the HTML template for CSS and markup setup. It is hidden from systhema create.
React without Next.jsLink to this section
pnpm add @systhemaui/core @systhemaui/reactImport components from @systhemaui/react. Supply your own router and build tooling. See Manual installation for Tailwind wiring.
Next.js without a CMSLink to this section
pnpm add @systhemaui/core @systhemaui/react @systhemaui/nextYou still need Next.js, React, React DOM and Tailwind dependencies. The Next.js template includes them; manual Next.js installation adds Systhema to an existing app.
Next.js with PayloadLink to this section
pnpm add @systhemaui/core @systhemaui/react @systhemaui/next @systhemaui/payloadYou also need Payload, a database adapter and its peer dependencies. Start with the Payload template, or follow manual Payload installation for an existing project. Keep payload and the @payloadcms/* packages aligned with the supported patch range in Deploying.
Design and maintenance toolsLink to this section
Install the global CLI after completing Registry access:
pnpm add -g @systhemaui/cliUse Systhema Design or the Design CLI to generate tokens. The Figma plugin exports and imports tokens without adding runtime code to your site.
Published packages come from the private GitHub Packages registry. The Figma plugin is distributed separately to licensed teams.