fancy-inertia

Inertia hands a Laravel app a React front end with no API layer — but the seams between Inertia and a real component kit are all friction: where do app-shell providers mount so they survive page swaps, how do server-validation errors reach a controlled input, what touches window and breaks SSR, and how does a navigation feel like more than a hard content swap? fancy-inertia is the bridge that closes every one of those seams for the Fancy UI set, so an Inertia page reads like any other fancy surface.

A small set of Inertia ↔ Fancy adapters. <FancyAppRoot> mounts the app-shell providers once (Toast + fancy-screens' ScreenSystem + echarts registration) above the Inertia outlet, so they persist across navigation. useFancyForm() wraps Inertia's useForm() with a field(name) helper that drops straight into react-fancy inputs, carrying server validation errors. <FancyClientOnly> is the skip-SSR boundary for components that need window. registerFancyComponents() + <InertiaSchemaScreen> turn a Laravel controller into the source of truth for an agent-emitted JSON page. And <FancyPageTransition> is a zero-dependency, CSS-driven enter/exit page crossfade keyed on the Inertia page — fade / slide / scale / blur / none; <FancyTransitionProvider> + useFancyTransition() hold and persist the active choice (localStorage) so a live switcher re-scopes every navigation. It snapshots the outgoing page (preserved by key — no remount flash) and honors prefers-reduced-motion.

Install npm i @particle-academy/fancy-inertia (peers: @inertiajs/react, react, react-dom, @particle-academy/react-fancy; optional fancy-screens / fancy-echarts). Mount the shell in your Inertia entry: createInertiaApp({ setup: ({ App, props, el }) => createRoot(el).render(<FancyAppRoot><App {...props} /></FancyAppRoot>) }). For page transitions, wrap <App> once in <FancyTransitionProvider defaultTransition="fade"> and render the page through <FancyPageTransition pageKey={key}> (App-root render-prop for whole-app coverage, or inside a persistent layout to transition only the body). Build a switcher anywhere with useFancyTransition() + FANCY_TRANSITION_LABELS. This very showcase dogfoods it — the ✨ picker in the top nav.