---
title: "Installation"
description: "Install Radiant and JSX for the standard setup, or Signals for standalone reactive use."
group: Getting Started
order: 2
---

import { CodeTabs } from '@/components/code-tabs';




# Installation

Radiant is the core package. Signals ships with it as the reactive layer. JSX is the companion package for TSX rendering.

For the standard Radiant setup, install `@ecopages/radiant` and `@ecopages/jsx`. `@ecopages/signals` is installed automatically with `@ecopages/radiant`.

That is the simplest setup today:

- `@ecopages/radiant` provides the custom-element and controller runtime
- `@ecopages/jsx` backs `render()` and the TSX authoring flow
- `@ecopages/signals` backs host reactivity, `@signal`, and resource helpers

You do not need to import JSX or Signals APIs directly in every Radiant component. A component can use `render()` without importing `@ecopages/jsx` symbols itself, and `@state` does not require importing `@ecopages/signals` in application code.

`@ecopages/radiant` currently declares `@ecopages/jsx` as a peer dependency. It also depends on `@ecopages/signals` directly for host member state. `@ecopages/jsx` declares `@ecopages/signals` as a peer dependency for signal-backed derived bindings such as `mapSubscribable(...)`.

Installing `@ecopages/radiant` brings `@ecopages/signals` transitively, which satisfies `@ecopages/jsx`'s peer dependency. The packages still ship as separate npm artifacts; your app bundler must resolve them to a **single** module instance within the application graph. Inlining `@ecopages/signals` into more than one app vendor chunk (or installing conflicting versions) breaks shared reactivity — for example, `@state` updates may not reach `createResource` when each chunk owns its own signals runtime.

<CodeTabs
  label="Package managers"
  tabs={[
    { id: 'npm', label: 'npm', code: 'npm install @ecopages/radiant @ecopages/jsx' },
    { id: 'pnpm', label: 'pnpm', code: 'pnpm add @ecopages/radiant @ecopages/jsx' },
    { id: 'bun', label: 'bun', code: 'bun add @ecopages/radiant @ecopages/jsx' },
  ]}
  copyLabel="Copy install command"
  defaultSelectedKey="npm"
/>

## TypeScript Setup For JSX

```json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@ecopages/jsx"
  }
}
```
<br/>
Or enable it per file:

```tsx
/** @jsxImportSource @ecopages/jsx */
```

## Signals Standalone

If you only want the reactive core, install `@ecopages/signals` by itself:

<CodeTabs
  label="Signals package managers"
  tabs={[
    { id: 'npm', label: 'npm', code: 'npm install @ecopages/signals' },
	{ id: 'pnpm', label: 'pnpm', code: 'pnpm add @ecopages/signals' },
	{ id: 'bun', label: 'bun', code: 'bun add @ecopages/signals' },
  ]}
  copyLabel="Copy install command"
  defaultSelectedKey="npm"
/>

## Which Packages To Install

- Install `@ecopages/radiant` and `@ecopages/jsx` for the standard Radiant setup. `@ecopages/signals` comes in with `@ecopages/radiant`.
- `@ecopages/jsx` is required for TSX authoring, `render()`, hydration helpers, and SSR rendering.
- `@ecopages/signals` backs `@signal`, host-owned async resources, and standalone reactive code. Install it explicitly only when you want the reactive layer outside Radiant, or when using `@ecopages/jsx` without radiant.