Context Rootv1.0.0 • Strict TypeScript

<GlideCNProvider>

The top-level context coordinator that initializes transition state, manages global baseline configuration, and detects user motion preferences.

TypeScript Types CLI Commands 69+ Transitions Interactive Studio

ES Module Import

import { GlideCNProvider, GlideCN } from '@/components/glidecn';

Setup & Integration

Place <GlideCNProvider> at the root of your application layout. It creates the React Context that connects all <GlideCN> adapters, <Page> wrappers, and useGlide() hooks.

app/layout.tsx

import { GlideCNProvider, GlideCN } from '@/components/glidecn';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <GlideCNProvider defaultTransition="slide" defaultConfig={{ duration: 0.5 }}>
          <GlideCN>
            {children}
          </GlideCN>
        </GlideCNProvider>
      </body>
    </html>
  );
}

import { GlideCNProvider, GlideCN } from '@/components/glidecn';export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en">      <body>        <GlideCNProvider defaultTransition="slide" defaultConfig={{ duration: 0.5 }}>          <GlideCN>            {children}          </GlideCN>        </GlideCNProvider>      </body>    </html>  );}

GlideCNProvider Properties

childrenRequired

React.ReactNode

Your application layout and router tree. Must wrap router nodes so GlideCN can inject transition context and freeze exiting views.

defaultTransition

string

The global fallback transition name used when a <Page> does not specify its own transition override. Must match a registered transition.

Default:"fade"

defaultConfig

TransitionConfig

Global timing, easing curve, and flow direction baseline settings inherited by all child pages.

Default:{}

reducedMotion

boolean

Force reduced motion accessibility on or off. By default, auto-detects OS-level prefers-reduced-motion.

Default:undefined (auto)

Property Guides

Explore detailed examples of every property provided by <GlideCNProvider> to customize global fallbacks, timing, and accessibility.

← API Reference Hub <GlideCN> Router Adapter →