# @fluentui-react-native/framework-base

> Base types and utilities fluentui-react-native frameworks

Latest version **0.7.0** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui-react-native/framework-base
pnpm add @fluentui-react-native/framework-base
yarn add @fluentui-react-native/framework-base
bun add @fluentui-react-native/framework-base
```

## Health

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

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

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2026-09-02 |
| First published | 2025-07-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 690.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1443 |
| Maintainers | jasonvmorse, acoates, uifrnbot, hansenyy, microsoft1es |

## Links

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

## Recent versions

- 0.7.0 (latest) — 2026-09-02
- 0.6.1 — 2026-08-20
- 0.5.0 — 2026-08-06
- 0.4.1 — 2026-06-25
- 0.4.0 — 2026-06-17
- 0.3.3 — 2026-04-24
- 0.3.1 — 2026-03-03
- 0.3.0 — 2026-02-24
- 0.2.1 — 2025-08-05
- 0.2.0 — 2025-07-29
- 0.1.4 — 2025-07-25
- 0.1.3 — 2025-07-23
- 0.1.2 — 2025-07-22
- 0.1.1 — 2025-07-16

## README

# `@fluentui-react-native/framework-base`

This package provides core implementations and types to support both the legacy and current frameworks.

The functionality in these packages is now exposed as part of this package.

## Component Patterns

The shared rendering patterns and JSX handlers are centralized in this package. See the
[component authoring guide](./src/component-patterns/README.md) for how to choose and
combine `directComponent`, `phasedComponent`, and slots.

## Type Helpers

This package provides several TypeScript utility types:

- `PropsOf<TComponent>` - Extract props from a React component type
- `PropsWithRefOf<TComponent>` - Extract props, including a supported ref, from a React component type
- `PropsChildren<TProps>` - Extract the children entry from a props type
- `PropsWithoutChildren<TProps>` / `PartialWithoutChildren<TProps>` - Remove children while preserving unions
- `FunctionComponent<TProps>` - A function component type without the children handling complications of React.FC
- `DirectComponent<TProps>` - A function component marked for direct rendering
- `PhasedComponent<TProps>` - A component with two-phase rendering support
- `PhasedRender<TProps>` - The render signature for phased components (phase one returns the phase two renderer)
- `SlotComponent<TProps>` - Slot component type used in the composition framework
- `PropsTransform<TPropsIn, TPropsOut>` - A transform that maps one set of props to another
- `ComponentPropsTransform<TComponent>` - A transform for the resolved props of a component type
- `SlotOptions<TComponent>` - Default props, transform, and optional-slot rendering behavior
- `Simplify<T>`, `OuterPartial<T>`, and `PartialExcept<T, K>` - Helpers for producing readable partial object types
- `MergeCoreOptions` - Options accepted by `immutableMergeCore`
- `ValueFactory<T>` - Factory signature accepted by memo cache functions

## JSX Runtime

This package exports a custom JSX runtime at `@fluentui-react-native/framework-base/jsx-runtime`. Use it in your component files by adding this pragma as the **first line** of the file:

```tsx
/** @jsxImportSource @fluentui-react-native/framework-base */
```

The custom runtime enables automatic element flattening for direct and phased components. Any package using this pragma must include `@fluentui-react-native/framework-base` in its `devDependencies`.

> **Note:** This is the current pattern and replaces the legacy `/** @jsx withSlots */` directive (which required importing `withSlots` explicitly). The exported `withSlots` helper remains available only for the classic runtime used by deprecated framework code.

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