> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Learn how to install and set up Preact in your project

You can install Preact using your preferred package manager or include it directly via CDN.

## Package manager installation

Install Preact using npm, yarn, or pnpm:

<CodeGroup>
  ```bash npm theme={null}
  npm install preact
  ```

  ```bash yarn theme={null}
  yarn add preact
  ```

  ```bash pnpm theme={null}
  pnpm add preact
  ```
</CodeGroup>

## Core packages

Preact provides several packages for different use cases:

### Main package

The core Preact library includes everything you need to build components:

```bash theme={null}
npm install preact
```

This gives you access to:

* `render` and `hydrate` for mounting components
* `createElement` (aliased as `h`) for creating virtual DOM nodes
* `Component` class for building class components
* `Fragment` for grouping elements without a wrapper
* `createContext` for context API
* `createRef` for accessing DOM elements

### Hooks

For functional components with state and effects, install the hooks package:

```bash theme={null}
npm install preact
```

Preact hooks are available from `preact/hooks`:

```jsx theme={null}
import { useState, useEffect, useRef } from 'preact/hooks';
```

Available hooks:

* `useState` - Add state to functional components
* `useEffect` - Perform side effects
* `useLayoutEffect` - Synchronous version of useEffect
* `useReducer` - Alternative to useState for complex state
* `useRef` - Create mutable refs
* `useMemo` - Memoize expensive computations
* `useCallback` - Memoize callback functions
* `useContext` - Access context values
* `useImperativeHandle` - Customize ref exposure
* `useDebugValue` - Display custom labels in DevTools
* `useErrorBoundary` - Handle errors in components
* `useId` - Generate unique IDs

### React compatibility layer

For using React libraries with Preact, install the compatibility layer:

```bash theme={null}
npm install preact
```

Then alias `react` and `react-dom` to `preact/compat` in your bundler configuration:

```json theme={null}
{
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}
```

## CDN installation

You can use Preact directly in the browser without a build step using a CDN:

<CodeGroup>
  ```html unpkg theme={null}
  <script type="module">
    import { h, render } from 'https://unpkg.com/preact?module';
    import { useState } from 'https://unpkg.com/preact/hooks?module';

    const App = () => {
      const [count, setCount] = useState(0);
      return (
        h('div', null,
          h('p', null, `Count: ${count}`),
          h('button', { onClick: () => setCount(count + 1) }, 'Increment')
        )
      );
    };

    render(h(App), document.body);
  </script>
  ```

  ```html esm.sh theme={null}
  <script type="module">
    import { h, render } from 'https://esm.sh/preact';
    import { useState } from 'https://esm.sh/preact/hooks';

    const App = () => {
      const [count, setCount] = useState(0);
      return (
        h('div', null,
          h('p', null, `Count: ${count}`),
          h('button', { onClick: () => setCount(count + 1) }, 'Increment')
        )
      );
    };

    render(h(App), document.body);
  </script>
  ```
</CodeGroup>

## Package.json setup

After installation, your `package.json` should include Preact:

```json package.json theme={null}
{
  "name": "my-preact-app",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "preact": "^11.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.28.0",
    "@babel/plugin-transform-react-jsx": "^7.27.1"
  }
}
```

## JSX configuration

To use JSX syntax, you need to configure your build tool. Preact uses the `h` function (or `createElement`) for JSX transformation.

### Babel configuration

Create a `.babelrc` or `babel.config.js` file:

<CodeGroup>
  ```json .babelrc theme={null}
  {
    "plugins": [
      [
        "@babel/plugin-transform-react-jsx",
        {
          "pragma": "h",
          "pragmaFrag": "Fragment"
        }
      ]
    ]
  }
  ```

  ```js babel.config.js theme={null}
  module.exports = {
    plugins: [
      [
        '@babel/plugin-transform-react-jsx',
        {
          pragma: 'h',
          pragmaFrag: 'Fragment'
        }
      ]
    ]
  };
  ```
</CodeGroup>

### TypeScript configuration

For TypeScript projects, configure `tsconfig.json`:

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "lib": ["DOM", "ES2015"],
    "module": "ESNext",
    "target": "ES2015"
  }
}
```

Alternatively, use the classic JSX transform:

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}
```

## Verifying installation

Create a simple test file to verify your installation:

```jsx index.js theme={null}
import { h, render } from 'preact';

const App = () => (
  <div>
    <h1>Preact is installed!</h1>
    <p>You're ready to start building.</p>
  </div>
);

render(<App />, document.body);
```

## Import paths

Preact exports are organized by functionality:

```jsx theme={null}
// Core functionality
import { render, h, Fragment, Component, createRef } from 'preact';

// Hooks
import { useState, useEffect, useCallback } from 'preact/hooks';

// React compatibility
import { render } from 'preact/compat';
import { useState } from 'preact/compat';

// Developer tools
import 'preact/debug';

// DevTools integration
import 'preact/devtools';

// Test utilities
import { act, setupRerender } from 'preact/test-utils';

// JSX runtime (automatic with modern configs)
import { jsx } from 'preact/jsx-runtime';
```

## Next steps

<Card title="Quick start guide" icon="rocket" href="/quickstart">
  Build your first Preact application with our step-by-step guide
</Card>