---
title: viewTransition
description: Enable ViewTransition API from React in App Router
url: "https://nextjs.org/docs/15/app/api-reference/config/next-config-js/viewTransition"
version: 15.5.15
lastUpdated: 2025-06-16
prerequisites:
  - "Configuration: /docs/15/app/api-reference/config"
  - "next.config.js: /docs/15/app/api-reference/config/next-config-js"
---



> This feature is currently experimental and subject to change, it is not recommended for production.

`viewTransition` is an experimental flag that enables the new experimental [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) in React. This API allows you to leverage the native View Transitions browser API to create seamless transitions between UI states.

To enable this feature, you need to set the `viewTransition` property to `true` in your `next.config.js` file.

```js filename="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
}

module.exports = nextConfig
```

> Important Notice: This feature is not developed or maintained by the Next.js team — it is an experimental API from the React team. It is still in **early stages** and **not recommended for production use**. The implementation is still being iterated on, and its behavior may change in future React releases.
> Enabling this feature requires understanding the experimental nature of the API. To fully grasp its behavior, refer to the [React pull request](https://github.com/facebook/react/pull/31975) and related discussions.

## Usage

Once enabled, you can import the `ViewTransition` component from React in your application:

```jsx
import { unstable_ViewTransition as ViewTransition } from 'react'
```

However, documentation and examples are currently limited, and you will need to refer directly to React’s source code and discussions to understand how this works.

### Live Demo

Check out our [Next.js View Transition Demo](https://view-transition-example.vercel.app) to see this feature in action.

As this API evolves, we will update our documentation and share more examples. However, for now, we strongly advise against using this feature in production.
---

For an index of all available documentation, see [/docs/15/llms.txt](/docs/15/llms.txt)