# @fluentui/react-jsx-runtime

> Custom JSX runtime for @fluentui/react-components

Latest version **9.4.6** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-jsx-runtime
pnpm add @fluentui/react-jsx-runtime
yarn add @fluentui/react-jsx-runtime
bun add @fluentui/react-jsx-runtime
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.4.6 |
| Published | 2026-09-21 |
| First published | 2023-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 107.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20303 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-jsx-runtime
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-jsx-runtime

## Dependencies (2)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7

## Recent versions

- 9.4.6 (latest) — 2026-09-21
- 0.0.0-nightly-20260929-0404.1 (nightly) — 2026-09-29
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-alpha.16 (alpha) — 2023-08-16
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- 0.0.0-nightly-20260909-0407.1 — 2026-09-09
- … 952 more at https://npm.io/package/@fluentui/react-jsx-runtime/versions

## README

# @fluentui/react-jsx-runtime

**React JSX runtime for [Fluent UI React](https://react.fluentui.dev/)**

[Fluent UI React](https://react.fluentui.dev/) requires the usage of a custom JSX runtime to support the [slots API](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs)

## Usage

> [!NOTE]
> This custom JSX pragma should only be used in cases where you are trying to use the internal Fluent UI React **slot API in conjunction with `assertSlots()`**.
>
> If you are not using the internal slot API, don't use it.

In case you want to re-compose a component and redeclare its render method then this API will be necessary, learn more on [Rendering a component with slots](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs#rendering-components-with-slots)

To properly render a component with slots, our custom `createElement` method needs to be used instead of default `React.createElement`:

> NOTE: It works with both `automatic` or `classic` jsxRuntime configuration.

### React 17+

> infers `@jsxRuntime automatic`

```tsx
/** @jsxImportSource @fluentui/react-jsx-runtime */

import { assertSlots } from '@fluentui/react-utilities';

const renderButton_unstable = (state: ButtonState) => {
  const { iconOnly, iconPosition } = state;

  assertSlots<ButtonSlots>(state);

  return (
    <state.root>
      {iconPosition !== 'after' && state.icon && <state.icon />}
      {!iconOnly && state.root.children}
      {iconPosition === 'after' && state.icon && <state.icon />}
    </state.root>
  );
};
```

### React 16

> infers `@jsxRuntime classic`

```tsx
/** @jsx createElement */

// in order to apply our custom `createElement` factory to jsx transforms, to support slot creation, we need to import it physically
import { createElement } from '@fluentui/react-jsx-runtime';

import { assertSlots } from '@fluentui/react-utilities';

const renderButton_unstable = (state: ButtonState) => {
  const { iconOnly, iconPosition } = state;

  assertSlots<ButtonSlots>(state);

  return (
    <state.root>
      {iconPosition !== 'after' && state.icon && <state.icon />}
      {!iconOnly && state.root.children}
      {iconPosition === 'after' && state.icon && <state.icon />}
    </state.root>
  );
};
```

---
_Source: https://npm.io/package/@fluentui/react-jsx-runtime · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._