Skip to component
GGamma

Stack navigator

Screens push in from the side and pop back, like a native navigation stack.

New

Messages

Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useLayoutEffect, useRef, useState } from "react";4import type { HTMLAttributes, ReactNode } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6import { runViewTransition } from "@/lib/view-transition";7 8export type StackScreen = {9  id: string;10  /** Row and detail title. */11  title: string;12  /** Short line under the row title. */13  preview?: string;14  /** Small trailing value in the row, for example a time. */15  meta?: string;16  /** Monogram shown in the row avatar. */17  initials?: string;18  /** Detail screen content. */19  body: ReactNode;20  /** Optional pinned footer for the detail screen. */21  footer?: ReactNode;22};23 24export type StackNavigatorProps = Omit<25  HTMLAttributes<HTMLDivElement>,26  "children"27> & {28  /** One entry per screen; the row pushes into its detail. */