React 19+ · Component

ViewTransition

<ViewTransition> opts a component subtree into browser View Transition animations during React Transitions and Suspense updates. It is currently available only in React’s Canary and Experimental channels.

How it works

ViewTransition marks a component subtree for browser View Transition animations. React associates the nearest nested DOM node with a transition name, starts the browser transition during supported Transition or Suspense updates, and applies the default cross-fade or configured enter, exit, update, or shared-element classes.

Syntax

<ViewTransition name="unique-name" enter="enter-class" exit="exit-class" update="update-class" share="share-class">{children}</ViewTransition>

Parameters

Name	Type	Description
`name`	`string`	Optional unique name for the view transition; intended for shared-element transitions.
`enter`	`string \| (() => string)`	CSS class or class callback used when the component enters.
`exit`	`string \| (() => string)`	CSS class or class callback used when the component exits.
`update`	`string \| (() => string)`	CSS class or class callback used when the component updates.
`share`	`string \| (() => string)`	CSS class or class callback used for shared-element transitions.

Returns

A React component that renders its children and activates browser View Transition animations for eligible updates.

Key points

Wrap a subtree to opt it into React-managed View Transition animations.
The nearest nested DOM element becomes the transition's visual target.
Without custom styling, the browser supplies a cross-fade animation.
Use name when you intentionally connect matching elements across a shared-element transition.
Activation props can select CSS classes for customizing transition animations.
Transition types allow styling based on the cause of a transition.

Common mistakes

A direct state update does not activate the component; use a Transition, Suspense, or useDeferredValue update.
Do not provide name for ordinary animations; React generates unique names to avoid collisions.
Do not call the browser startViewTransition API manually for this feature.

Example: Animate a Transition update

import { Suspense, ViewTransition, startTransition, useState } from 'react';

export default function App() {
  const [show, setShow] = useState(false);

  function toggle() {
    startTransition(() => setShow(value => !value));
  }

  return (
    <main>
      <button onClick={toggle}>Toggle</button>
      <ViewTransition>
        <Suspense fallback={<p>Loading…</p>}>
          {show ? <p>Details are visible.</p> : <p>Details are hidden.</p>}
        </Suspense>
      </ViewTransition>
    </main>
  );
}

Wraps changing content in ViewTransition and marks the state update as a Transition so React can animate the update.

When to use it

Animated state transitions

Animate content changes caused by a React Transition.

Enter and exit animations

Animate a component when it is mounted or removed.

Shared-element transitions

Coordinate matching elements across screens or locations.

Transition-type-specific styling

Style animations differently according to the transition cause.

Suspense
useDeferredValue
startTransition
addTransitionType
Transition

Source: <ViewTransition> – React. Checked 2026-10-15.