From f82cd735f04c1202b05b7508cb1166b82770bc07 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 08:22:10 +0200 Subject: [PATCH 01/10] add react capacitor navigation registry item --- registry.json | 80 +++++++++++++++++++ .../react-capacitor-navigation/src/app.tsx | 27 +++++++ .../src/capgo-transitions.d.ts | 1 + .../src/components/capacitor-header.tsx | 51 ++++++++++++ .../src/components/capacitor-tab-bar.tsx | 39 +++++++++ .../src/hooks/use-capacitor-page.ts | 16 ++++ .../react-capacitor-navigation/src/main.tsx | 19 +++++ .../src/pages/app/home.tsx | 37 +++++++++ .../src/pages/app/home/details.tsx | 20 +++++ .../src/pages/app/settings.tsx | 26 ++++++ .../react-capacitor-navigation/src/router.tsx | 21 +++++ .../src/styles/capacitor-safe-area.css | 12 +++ 12 files changed, 349 insertions(+) create mode 100644 registry.json create mode 100644 registry/react-capacitor-navigation/src/app.tsx create mode 100644 registry/react-capacitor-navigation/src/capgo-transitions.d.ts create mode 100644 registry/react-capacitor-navigation/src/components/capacitor-header.tsx create mode 100644 registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx create mode 100644 registry/react-capacitor-navigation/src/hooks/use-capacitor-page.ts create mode 100644 registry/react-capacitor-navigation/src/main.tsx create mode 100644 registry/react-capacitor-navigation/src/pages/app/home.tsx create mode 100644 registry/react-capacitor-navigation/src/pages/app/home/details.tsx create mode 100644 registry/react-capacitor-navigation/src/pages/app/settings.tsx create mode 100644 registry/react-capacitor-navigation/src/router.tsx create mode 100644 registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css diff --git a/registry.json b/registry.json new file mode 100644 index 0000000..0f971b3 --- /dev/null +++ b/registry.json @@ -0,0 +1,80 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry.json", + "name": "capstart", + "homepage": "https://github.com/AdrienADV/capstart", + "items": [ + { + "name": "react-capacitor-navigation", + "type": "registry:item", + "title": "React Capacitor Navigation", + "description": "Mobile-first React Router shell for Capacitor apps with Capgo transitions, a tab layout, a native-feeling header, safe-area variables, and example screens.", + "dependencies": [ + "@capacitor/core", + "@capgo/capacitor-transitions", + "lucide-react", + "react-router" + ], + "registryDependencies": [ + "button" + ], + "files": [ + { + "path": "registry/react-capacitor-navigation/src/main.tsx", + "type": "registry:file", + "target": "~/src/main.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/app.tsx", + "type": "registry:file", + "target": "~/src/app.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/router.tsx", + "type": "registry:file", + "target": "~/src/router.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/components/capacitor-header.tsx", + "type": "registry:file", + "target": "~/src/components/capacitor-header.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/hooks/use-capacitor-page.ts", + "type": "registry:file", + "target": "~/src/hooks/use-capacitor-page.ts" + }, + { + "path": "registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx", + "type": "registry:file", + "target": "~/src/components/capacitor-tab-bar.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/pages/app/home.tsx", + "type": "registry:file", + "target": "~/src/pages/app/home.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/pages/app/settings.tsx", + "type": "registry:file", + "target": "~/src/pages/app/settings.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/pages/app/home/details.tsx", + "type": "registry:file", + "target": "~/src/pages/app/home/details.tsx" + }, + { + "path": "registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css", + "type": "registry:file", + "target": "~/src/styles/capacitor-safe-area.css" + }, + { + "path": "registry/react-capacitor-navigation/src/capgo-transitions.d.ts", + "type": "registry:file", + "target": "~/src/capgo-transitions.d.ts" + } + ], + "docs": "This item installs a starter navigation shell and targets src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects." + } + ] +} diff --git a/registry/react-capacitor-navigation/src/app.tsx b/registry/react-capacitor-navigation/src/app.tsx new file mode 100644 index 0000000..a549b45 --- /dev/null +++ b/registry/react-capacitor-navigation/src/app.tsx @@ -0,0 +1,27 @@ +import { useEffect, useRef } from "react" +import { useLocation } from "react-router" +import { setupRouterOutlet } from "@capgo/capacitor-transitions/react" + +import Router from "./router" + +export default function App() { + const location = useLocation() + const outletRef = useRef(null) + + useEffect(() => { + if (!outletRef.current) { + return + } + + setupRouterOutlet(outletRef.current, { + platform: "auto", + swipeGesture: "auto", + }) + }, []) + + return ( + + + + ) +} diff --git a/registry/react-capacitor-navigation/src/capgo-transitions.d.ts b/registry/react-capacitor-navigation/src/capgo-transitions.d.ts new file mode 100644 index 0000000..638fbbf --- /dev/null +++ b/registry/react-capacitor-navigation/src/capgo-transitions.d.ts @@ -0,0 +1 @@ +import "@capgo/capacitor-transitions/react" diff --git a/registry/react-capacitor-navigation/src/components/capacitor-header.tsx b/registry/react-capacitor-navigation/src/components/capacitor-header.tsx new file mode 100644 index 0000000..a8929da --- /dev/null +++ b/registry/react-capacitor-navigation/src/components/capacitor-header.tsx @@ -0,0 +1,51 @@ +import type { ReactNode } from "react" +import { ChevronLeftIcon } from "lucide-react" +import { useNavigate } from "react-router" +import { setDirection } from "@capgo/capacitor-transitions/react" + +import { Button } from "@/components/ui/button" +import { cn } from "@/lib/utils" + +interface CapacitorHeaderProps { + title?: string + children?: ReactNode + className?: string +} + +export default function CapacitorHeader({ + title, + children, + className, +}: CapacitorHeaderProps) { + const navigate = useNavigate() + + function goBack() { + setDirection("back") + navigate(-1) + } + + return ( + +
+ + {title ?

{title}

: null} + {children} +
+ + ) +} diff --git a/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx new file mode 100644 index 0000000..e66f639 --- /dev/null +++ b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx @@ -0,0 +1,39 @@ +import { HomeIcon, SettingsIcon } from "lucide-react" +import { NavLink } from "react-router" +import { setNavigation } from "@capgo/capacitor-transitions/react" + +import { cn } from "@/lib/utils" + +const tabs = [ + { to: "/app", icon: HomeIcon, label: "Home" }, + { to: "/app/settings", icon: SettingsIcon, label: "Settings" }, +] + +export default function CapacitorTabBar() { + return ( + + + + ) +} diff --git a/registry/react-capacitor-navigation/src/hooks/use-capacitor-page.ts b/registry/react-capacitor-navigation/src/hooks/use-capacitor-page.ts new file mode 100644 index 0000000..3f1eab9 --- /dev/null +++ b/registry/react-capacitor-navigation/src/hooks/use-capacitor-page.ts @@ -0,0 +1,16 @@ +import { useEffect, useRef } from "react" +import { setupPage } from "@capgo/capacitor-transitions/react" + +export function useCapacitorPage() { + const pageRef = useRef(null) + + useEffect(() => { + if (!pageRef.current) { + return + } + + return setupPage(pageRef.current) + }, []) + + return pageRef +} diff --git a/registry/react-capacitor-navigation/src/main.tsx b/registry/react-capacitor-navigation/src/main.tsx new file mode 100644 index 0000000..ac39a66 --- /dev/null +++ b/registry/react-capacitor-navigation/src/main.tsx @@ -0,0 +1,19 @@ +import { StrictMode } from "react" +import { createRoot } from "react-dom/client" +import { BrowserRouter } from "react-router" +import { initTransitions } from "@capgo/capacitor-transitions/react" +import "@capgo/capacitor-transitions" + +import App from "./app" +import "./index.css" +import "./styles/capacitor-safe-area.css" + +initTransitions({ platform: "auto" }) + +createRoot(document.getElementById("root")!).render( + + + + + +) diff --git a/registry/react-capacitor-navigation/src/pages/app/home.tsx b/registry/react-capacitor-navigation/src/pages/app/home.tsx new file mode 100644 index 0000000..a9701a7 --- /dev/null +++ b/registry/react-capacitor-navigation/src/pages/app/home.tsx @@ -0,0 +1,37 @@ +import { ArrowRightIcon } from "lucide-react" +import { useNavigate } from "react-router" +import { setDirection } from "@capgo/capacitor-transitions/react" + +import CapacitorTabBar from "@/components/capacitor-tab-bar" +import { Button } from "@/components/ui/button" +import { useCapacitorPage } from "@/hooks/use-capacitor-page" + +export default function Home() { + const navigate = useNavigate() + const pageRef = useCapacitorPage() + + function goToDetails() { + setDirection("forward") + navigate("/app/details") + } + + return ( + + +
+

Capstart Navigation

+

Welcome

+

+ This screen lives inside the tab navigation. +

+ + +
+ + + + ) +} diff --git a/registry/react-capacitor-navigation/src/pages/app/home/details.tsx b/registry/react-capacitor-navigation/src/pages/app/home/details.tsx new file mode 100644 index 0000000..aac1f65 --- /dev/null +++ b/registry/react-capacitor-navigation/src/pages/app/home/details.tsx @@ -0,0 +1,20 @@ +import CapacitorHeader from "@/components/capacitor-header" +import { useCapacitorPage } from "@/hooks/use-capacitor-page" + +export default function Details() { + const pageRef = useCapacitorPage() + + return ( + + + +
+

+ This screen is outside the tab navigation, so the bottom navigation + is hidden. +

+
+ + + ) +} diff --git a/registry/react-capacitor-navigation/src/pages/app/settings.tsx b/registry/react-capacitor-navigation/src/pages/app/settings.tsx new file mode 100644 index 0000000..a4ec5f5 --- /dev/null +++ b/registry/react-capacitor-navigation/src/pages/app/settings.tsx @@ -0,0 +1,26 @@ +import CapacitorTabBar from "@/components/capacitor-tab-bar" +import { Button } from "@/components/ui/button" +import { useCapacitorPage } from "@/hooks/use-capacitor-page" + +export default function Settings() { + const pageRef = useCapacitorPage() + + return ( + + +
+

Capstart Navigation

+

Settings

+

+ Replace this screen with your project settings. +

+ + +
+ + + + ) +} diff --git a/registry/react-capacitor-navigation/src/router.tsx b/registry/react-capacitor-navigation/src/router.tsx new file mode 100644 index 0000000..08521bb --- /dev/null +++ b/registry/react-capacitor-navigation/src/router.tsx @@ -0,0 +1,21 @@ +import type { Location } from "react-router" +import { Navigate, Route, Routes } from "react-router" + +import Details from "./pages/app/home/details" +import Home from "./pages/app/home" +import Settings from "./pages/app/settings" + +interface RouterProps { + location: Location +} + +export default function Router({ location }: RouterProps) { + return ( + + } /> + } /> + } /> + } /> + + ) +} diff --git a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css new file mode 100644 index 0000000..c8e7295 --- /dev/null +++ b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css @@ -0,0 +1,12 @@ +:root { + --safe-area-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px)); + --safe-area-bottom: env( + safe-area-inset-bottom, + var(--safe-area-inset-bottom, 0px) + ); + --safe-area-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px)); + --safe-area-right: env( + safe-area-inset-right, + var(--safe-area-inset-right, 0px) + ); +} From c67fc04e3b2febce1d59adad4f4f72bdfcbb9f94 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 09:20:20 +0200 Subject: [PATCH 02/10] align registry safe areas with capacitor 8 --- registry.json | 2 +- .../src/styles/capacitor-safe-area.css | 19 +++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/registry.json b/registry.json index 0f971b3..5e95f4c 100644 --- a/registry.json +++ b/registry.json @@ -74,7 +74,7 @@ "target": "~/src/capgo-transitions.d.ts" } ], - "docs": "This item installs a starter navigation shell and targets src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects." + "docs": "This item installs a starter navigation shell and targets src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, keep `viewport-fit=cover` in index.html and use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." } ] } diff --git a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css index c8e7295..abfbd7d 100644 --- a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css +++ b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css @@ -1,12 +1,15 @@ :root { - --safe-area-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px)); - --safe-area-bottom: env( - safe-area-inset-bottom, - var(--safe-area-inset-bottom, 0px) + --safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); + --safe-area-bottom: var( + --safe-area-inset-bottom, + env(safe-area-inset-bottom, 0px) ); - --safe-area-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px)); - --safe-area-right: env( - safe-area-inset-right, - var(--safe-area-inset-right, 0px) + --safe-area-left: var( + --safe-area-inset-left, + env(safe-area-inset-left, 0px) + ); + --safe-area-right: var( + --safe-area-inset-right, + env(safe-area-inset-right, 0px) ); } From 8523bb59a2710bec87ad1d71f0b38914af2c1d9a Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 09:42:50 +0200 Subject: [PATCH 03/10] fix registry shell layout transitions --- .../react-capacitor-navigation/src/app.tsx | 2 +- .../src/styles/capacitor-safe-area.css | 33 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/registry/react-capacitor-navigation/src/app.tsx b/registry/react-capacitor-navigation/src/app.tsx index a549b45..33de54d 100644 --- a/registry/react-capacitor-navigation/src/app.tsx +++ b/registry/react-capacitor-navigation/src/app.tsx @@ -21,7 +21,7 @@ export default function App() { return ( - + ) } diff --git a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css index abfbd7d..9419a87 100644 --- a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css +++ b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css @@ -13,3 +13,36 @@ env(safe-area-inset-right, 0px) ); } + +html, +body, +#root { + width: 100%; + height: 100%; + min-height: 100%; +} + +body { + margin: 0; + display: block; + overflow: hidden; + background: var(--background); + color: var(--foreground); +} + +#root { + isolation: isolate; +} + +cap-router-outlet { + display: block; + width: 100%; + height: 100%; + background: var(--background); + color: var(--foreground); +} + +cap-page { + --cap-page-background: var(--background); + --cap-page-color: var(--foreground); +} From aba3d7b1c11ee519ff8aa2a5200e3c9022619f17 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 09:45:06 +0200 Subject: [PATCH 04/10] animate registry tab navigation --- .../src/components/capacitor-tab-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx index e66f639..afd4952 100644 --- a/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx +++ b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx @@ -20,7 +20,7 @@ export default function CapacitorTabBar() { to={tab.to} end={tab.to === "/app"} replace - onClick={() => setNavigation("root", "none")} + onClick={() => setNavigation("root", "forward")} className={({ isActive }) => cn( "flex h-14 flex-1 flex-col items-center justify-center gap-1 text-xs font-medium transition-colors", From 360c79515d1bd1bc53f2227d7ffdc1e30abd59a2 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 10:03:36 +0200 Subject: [PATCH 05/10] disable tab navigation animation --- .../src/components/capacitor-tab-bar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx index afd4952..e66f639 100644 --- a/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx +++ b/registry/react-capacitor-navigation/src/components/capacitor-tab-bar.tsx @@ -20,7 +20,7 @@ export default function CapacitorTabBar() { to={tab.to} end={tab.to === "/app"} replace - onClick={() => setNavigation("root", "forward")} + onClick={() => setNavigation("root", "none")} className={({ isActive }) => cn( "flex h-14 flex-1 flex-col items-center justify-center gap-1 text-xs font-medium transition-colors", From b6dca7abd41940de77a231cb1a9ced04edd10964 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 14:18:56 +0200 Subject: [PATCH 06/10] add viewport fit index to navigation registry --- registry.json | 7 ++++++- registry/react-capacitor-navigation/index.html | 15 +++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 registry/react-capacitor-navigation/index.html diff --git a/registry.json b/registry.json index 5e95f4c..790627e 100644 --- a/registry.json +++ b/registry.json @@ -18,6 +18,11 @@ "button" ], "files": [ + { + "path": "registry/react-capacitor-navigation/index.html", + "type": "registry:file", + "target": "~/index.html" + }, { "path": "registry/react-capacitor-navigation/src/main.tsx", "type": "registry:file", @@ -74,7 +79,7 @@ "target": "~/src/capgo-transitions.d.ts" } ], - "docs": "This item installs a starter navigation shell and targets src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, keep `viewport-fit=cover` in index.html and use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." + "docs": "This item installs a starter navigation shell and targets index.html, src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, index.html includes `viewport-fit=cover`; use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." } ] } diff --git a/registry/react-capacitor-navigation/index.html b/registry/react-capacitor-navigation/index.html new file mode 100644 index 0000000..bcc2d31 --- /dev/null +++ b/registry/react-capacitor-navigation/index.html @@ -0,0 +1,15 @@ + + + + + + Capacitor App + + +
+ + + From 80b9f9e9cbb4e5b9f7f479c24f75796ac55b7954 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 15:21:16 +0200 Subject: [PATCH 07/10] Inject navigation shell CSS from registry --- registry.json | 41 +++++++++++++--- .../react-capacitor-navigation/src/main.tsx | 1 - .../src/styles/capacitor-safe-area.css | 48 ------------------- 3 files changed, 35 insertions(+), 55 deletions(-) delete mode 100644 registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css diff --git a/registry.json b/registry.json index 790627e..01fb2aa 100644 --- a/registry.json +++ b/registry.json @@ -17,6 +17,40 @@ "registryDependencies": [ "button" ], + "css": { + ":root": { + "--safe-area-top": "var(--safe-area-inset-top, env(safe-area-inset-top, 0px))", + "--safe-area-bottom": "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))", + "--safe-area-left": "var(--safe-area-inset-left, env(safe-area-inset-left, 0px))", + "--safe-area-right": "var(--safe-area-inset-right, env(safe-area-inset-right, 0px))" + }, + "html, body, #root": { + "width": "100%", + "height": "100%", + "min-height": "100%" + }, + "body": { + "margin": "0", + "display": "block", + "overflow": "hidden", + "background": "var(--background)", + "color": "var(--foreground)" + }, + "#root": { + "isolation": "isolate" + }, + "cap-router-outlet": { + "display": "block", + "width": "100%", + "height": "100%", + "background": "var(--background)", + "color": "var(--foreground)" + }, + "cap-page": { + "--cap-page-background": "var(--background)", + "--cap-page-color": "var(--foreground)" + } + }, "files": [ { "path": "registry/react-capacitor-navigation/index.html", @@ -68,18 +102,13 @@ "type": "registry:file", "target": "~/src/pages/app/home/details.tsx" }, - { - "path": "registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css", - "type": "registry:file", - "target": "~/src/styles/capacitor-safe-area.css" - }, { "path": "registry/react-capacitor-navigation/src/capgo-transitions.d.ts", "type": "registry:file", "target": "~/src/capgo-transitions.d.ts" } ], - "docs": "This item installs a starter navigation shell and targets index.html, src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, index.html includes `viewport-fit=cover`; use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." + "docs": "This item installs a starter navigation shell and targets index.html, src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, index.html includes `viewport-fit=cover`; the registry injects the safe-area and full-height shell rules into the project's configured global CSS file. Use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." } ] } diff --git a/registry/react-capacitor-navigation/src/main.tsx b/registry/react-capacitor-navigation/src/main.tsx index ac39a66..4480496 100644 --- a/registry/react-capacitor-navigation/src/main.tsx +++ b/registry/react-capacitor-navigation/src/main.tsx @@ -6,7 +6,6 @@ import "@capgo/capacitor-transitions" import App from "./app" import "./index.css" -import "./styles/capacitor-safe-area.css" initTransitions({ platform: "auto" }) diff --git a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css b/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css deleted file mode 100644 index 9419a87..0000000 --- a/registry/react-capacitor-navigation/src/styles/capacitor-safe-area.css +++ /dev/null @@ -1,48 +0,0 @@ -:root { - --safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); - --safe-area-bottom: var( - --safe-area-inset-bottom, - env(safe-area-inset-bottom, 0px) - ); - --safe-area-left: var( - --safe-area-inset-left, - env(safe-area-inset-left, 0px) - ); - --safe-area-right: var( - --safe-area-inset-right, - env(safe-area-inset-right, 0px) - ); -} - -html, -body, -#root { - width: 100%; - height: 100%; - min-height: 100%; -} - -body { - margin: 0; - display: block; - overflow: hidden; - background: var(--background); - color: var(--foreground); -} - -#root { - isolation: isolate; -} - -cap-router-outlet { - display: block; - width: 100%; - height: 100%; - background: var(--background); - color: var(--foreground); -} - -cap-page { - --cap-page-background: var(--background); - --cap-page-color: var(--foreground); -} From 8e5155b67090123eb099268368fe668deec3975b Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 15:26:35 +0200 Subject: [PATCH 08/10] Simplify navigation registry CSS --- registry.json | 25 ++++--------------------- 1 file changed, 4 insertions(+), 21 deletions(-) diff --git a/registry.json b/registry.json index 01fb2aa..086d788 100644 --- a/registry.json +++ b/registry.json @@ -20,35 +20,18 @@ "css": { ":root": { "--safe-area-top": "var(--safe-area-inset-top, env(safe-area-inset-top, 0px))", - "--safe-area-bottom": "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))", - "--safe-area-left": "var(--safe-area-inset-left, env(safe-area-inset-left, 0px))", - "--safe-area-right": "var(--safe-area-inset-right, env(safe-area-inset-right, 0px))" + "--safe-area-bottom": "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))" }, "html, body, #root": { - "width": "100%", - "height": "100%", - "min-height": "100%" + "height": "100%" }, "body": { "margin": "0", - "display": "block", - "overflow": "hidden", - "background": "var(--background)", - "color": "var(--foreground)" - }, - "#root": { - "isolation": "isolate" + "overflow": "hidden" }, "cap-router-outlet": { "display": "block", - "width": "100%", - "height": "100%", - "background": "var(--background)", - "color": "var(--foreground)" - }, - "cap-page": { - "--cap-page-background": "var(--background)", - "--cap-page-color": "var(--foreground)" + "height": "100%" } }, "files": [ From d4c130a1800b12b0af1408f451b66877a3ddb750 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 15:31:40 +0200 Subject: [PATCH 09/10] Remove redundant Capgo transition types file --- registry.json | 5 ----- .../react-capacitor-navigation/src/capgo-transitions.d.ts | 1 - 2 files changed, 6 deletions(-) delete mode 100644 registry/react-capacitor-navigation/src/capgo-transitions.d.ts diff --git a/registry.json b/registry.json index 086d788..4acca0c 100644 --- a/registry.json +++ b/registry.json @@ -84,11 +84,6 @@ "path": "registry/react-capacitor-navigation/src/pages/app/home/details.tsx", "type": "registry:file", "target": "~/src/pages/app/home/details.tsx" - }, - { - "path": "registry/react-capacitor-navigation/src/capgo-transitions.d.ts", - "type": "registry:file", - "target": "~/src/capgo-transitions.d.ts" } ], "docs": "This item installs a starter navigation shell and targets index.html, src/main.tsx, src/app.tsx and src/router.tsx. Run `shadcn add AdrienADV/capstart/react-capacitor-navigation --dry-run` first in existing projects. For Capacitor 8 safe areas, index.html includes `viewport-fit=cover`; the registry injects the safe-area and full-height shell rules into the project's configured global CSS file. Use the default `SystemBars.insetsHandling = \"css\"` behavior so Android can inject `--safe-area-inset-*` variables." diff --git a/registry/react-capacitor-navigation/src/capgo-transitions.d.ts b/registry/react-capacitor-navigation/src/capgo-transitions.d.ts deleted file mode 100644 index 638fbbf..0000000 --- a/registry/react-capacitor-navigation/src/capgo-transitions.d.ts +++ /dev/null @@ -1 +0,0 @@ -import "@capgo/capacitor-transitions/react" From 58be6c2ffa785ad5de2b65f036bd5caf02b69a30 Mon Sep 17 00:00:00 2001 From: ADRIEN D Date: Wed, 3 Jun 2026 16:11:48 +0200 Subject: [PATCH 10/10] Update transitions documentation to reflect package name change from `@capgo/transitions` to `@capgo/capacitor-transitions` and enhance installation instructions for Vite users. --- capstart-website/content/docs/transitions.mdx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/capstart-website/content/docs/transitions.mdx b/capstart-website/content/docs/transitions.mdx index 133a883..91ab173 100644 --- a/capstart-website/content/docs/transitions.mdx +++ b/capstart-website/content/docs/transitions.mdx @@ -3,7 +3,7 @@ title: Transitions description: Add framework-agnostic page transitions to a Capacitor app. --- -`@capgo/transitions` adds native-feeling page transitions to a Capacitor app without forcing a design system or a router. +`@capgo/capacitor-transitions` adds native-feeling page transitions to a Capacitor app without forcing a design system or a router. It is a separate library from `@capgo/capacitor-native-navigation`. You can use both together: Native Navigation can render the native navbar and tabbar, while Transitions animates the page content underneath. @@ -32,11 +32,23 @@ It is a separate library from `@capgo/capacitor-native-navigation`. You can use ## Installation +### Vite + Capacitor + shadcn/ui + +If you use Vite, Capacitor, React, and shadcn/ui, install the complete React navigation shell from the Capstart registry: + +```bash +npx shadcn@latest add AdrienADV/capstart/react-capacitor-navigation +``` + +The registry installs the transition setup, a React Router shell, a bottom tab bar, a native-feeling header, example screens, `viewport-fit=cover`, and the minimal safe-area CSS variables needed by the layout. + +### Manual installation + ```bash -npm install @capgo/transitions +npm install @capgo/capacitor-transitions ``` -The package is published as `@capgo/transitions`. The GitHub repository is named `capacitor-transitions`. +The package is published as `@capgo/capacitor-transitions`. The GitHub repository is named `capacitor-transitions`. ## Basic Structure @@ -69,8 +81,8 @@ import { useEffect, useRef } from 'react'; import { initTransitions, setupRouterOutlet, -} from '@capgo/transitions/react'; -import '@capgo/transitions'; +} from '@capgo/capacitor-transitions/react'; +import '@capgo/capacitor-transitions'; initTransitions({ platform: 'auto' }); @@ -92,7 +104,7 @@ export function AppShell({ children }: { children: React.ReactNode }) { ```tsx title="HomePage.tsx" import { useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -import { setDirection, setupPage } from '@capgo/transitions/react'; +import { setDirection, setupPage } from '@capgo/capacitor-transitions/react'; export function HomePage() { const navigate = useNavigate(); @@ -159,7 +171,7 @@ export function HomePage() { For lower-level control, create a transition controller and drive the stack manually. ```ts title="transition-controller.ts" -import { createTransitionController } from '@capgo/transitions'; +import { createTransitionController } from '@capgo/capacitor-transitions'; const controller = createTransitionController({ platform: 'auto', @@ -182,11 +194,11 @@ await controller.setRoot(homePageElement, { ## Use With Native Navigation -`@capgo/transitions` and `@capgo/capacitor-native-navigation` solve different parts of the interface. +`@capgo/capacitor-transitions` and `@capgo/capacitor-native-navigation` solve different parts of the interface. | Library | Responsibility | | --- | --- | -| `@capgo/transitions` | Animates web pages, headers, content, and footers inside the WebView. | +| `@capgo/capacitor-transitions` | Animates web pages, headers, content, and footers inside the WebView. | | `@capgo/capacitor-native-navigation` | Renders native navbar and tabbar surfaces around the WebView. | When you use both together, keep the native bars outside the animated page content. Let Native Navigation own the bars, and let Transitions animate the route content.