Installation

Check the requirements

Before installing Segue, confirm that your project uses:

• Next.js >=16.3.1 <17
• React >=19.2 <20
• The Next.js App Router

Install Segue

Add @humaan/segue with your package manager:

npm install @humaan/segue

pnpm add @humaan/segue

yarn add @humaan/segue

bun add @humaan/segue

The package doesn't include CSS, an animation library, or a build plugin. Your application supplies its own visual styles and animation code.

Choose an import path

Segue provides separate import paths for server and client code.

Use @humaan/segue to define the manifest. This import path doesn't use browser or React client APIs, so Server Components can use it.

import { defineManifest } from "@humaan/segue";

Use @humaan/segue/client to create the components and hooks used by the application. Any file that uses these APIs must be a Client Component.

"use client";
 
import { createSegue } from "@humaan/segue/client";

The API reference lists the additional functions available from each import path.

Next steps

• Build your first transition to connect a manifest, Preset, Provider, and Link.
• Read the core concepts to learn which Route Transition tasks Segue manages and which tasks your application manages.
• Review the API reference when you need exact types and defaults.