---
title: "Choosing packages"
description: "Choose the Systhema packages for HTML, React, Next.js or a CMS-driven site."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/getting-started/choosing-packages
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/llms.txt
---
> This page isn't translated yet. Showing English.


Install the packages your application uses. All published `@systhemaui/*` packages share one version; keep them aligned.

## Package roles

| Package               | Role                                                                    | Canonical documentation                  |
| --------------------- | ----------------------------------------------------------------------- | ---------------------------------------- |
| `@systhemaui/core`    | Tokens, Tailwind CSS, generated types and the local `systhema-core` CLI | [Core reference](https://docs.systhema.app/ar/reference/core.md)   |
| `@systhemaui/react`   | Framework-independent React components and listeners                    | [Components](https://docs.systhema.app/ar/components.md)     |
| `@systhemaui/next`    | Next.js component twins, provider and routing helpers                   | [Next.js](https://docs.systhema.app/ar/nextjs.md)            |
| `@systhemaui/payload` | Payload configuration, blocks, editors and public rendering             | [Payload](https://docs.systhema.app/ar/payload.md)           |
| `@systhemaui/cli`     | Global `systhema` commands for consumer projects                        | [CLI](https://docs.systhema.app/ar/cli.md)                   |
| `@systhemaui/figma`   | Standalone Figma plugin distributed to licensed teams                   | [Figma plugin](https://docs.systhema.app/ar/design/figma.md) |

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 React

```bash
pnpm add @systhemaui/core tailwindcss @tailwindcss/cli
```

Use the [HTML template](templates/html.md) for CSS and markup setup. It is hidden from `systhema create`.

> [!WARNING]
> The shipped vanilla JavaScript bundle currently throws on load in browsers. Treat its accordion, menu and other listeners as blocked by that product bug; verify a fixed release before relying on them.

## React without Next.js

```bash
pnpm add @systhemaui/core @systhemaui/react
```

Import components from `@systhemaui/react`. Supply your own router and build tooling. See [Manual installation](installation/index.md) for Tailwind wiring.

## Next.js without a CMS

```bash
pnpm add @systhemaui/core @systhemaui/react @systhemaui/next
```

You still need Next.js, React, React DOM and Tailwind dependencies. The [Next.js template](templates/nextjs.md) includes them; [manual Next.js installation](installation/nextjs.md) adds Systhema to an existing app.

## Next.js with Payload

```bash
pnpm add @systhemaui/core @systhemaui/react @systhemaui/next @systhemaui/payload
```

You also need Payload, a database adapter and its peer dependencies. Start with the [Payload template](templates/payload.md), or follow [manual Payload installation](installation/payload.md) for an existing project. Keep `payload` and the `@payloadcms/*` packages aligned with the supported patch range in [Deploying](https://docs.systhema.app/ar/guides/deploying.md#payload-version-policy).

## Design and maintenance tools

Install the global CLI after completing [Registry access](registry-access.md):

```bash
pnpm add -g @systhemaui/cli
```

Use [Systhema Design](https://docs.systhema.app/ar/design/systhema-design.md) or the [Design CLI](https://docs.systhema.app/ar/design/systhema-design/cli.md) 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.