Use Gadget's Preact hooks to build Shopify UI extensions

@gadgetinc/preact contains hooks and a Provider to manage your 2025-10 UI extension sessions and make custom network requests.

TLDR: Gadget has released Preact hooks to help you build Shopify extensions on API version 2025-10 (and later).

Shopify’s API 2025-10 release marks a major shift for Shopify app developers. Extensions have officially moved to Preact and Polaris web components are now stable. These changes also enable Shopify to enforce a new 64 KB bundle size limit for extensions.

These updates make extensions faster, smaller, and more consistent across Shopify surfaces. They also mean developers may have to replace existing tools and packages with Preact equivalents and (eventually) migrate existing extensions to Preact and web components.

To support Preact extensions, we’re releasing Preact hooks designed to make it easy to work with your Gadget app backend while staying under Shopify’s new bundle size constraints.

The new UI extension stack: Preact and Polaris web components

For years, Shopify extensions and apps have been built with React and Polaris React, or vanilla JS. With 2025-10, Shopify is taking a decisive step forward:

• 
  Preact replaces React or vanilla JS in all new extensions.


• 
  Polaris web components are used to build extensions (instead of Polaris React) and are loaded directly from Shopify’s CDN.


• 
  Extensions must stay under 64kb. This limit enforces fewer dependencies, smaller runtimes, and faster load times for merchants and buyers.

What this means for developers

Preact’s syntax is nearly identical to React. You’ll still use familiar hooks like useState and useEffect, and you will build with JSX. You may need to adapt your tooling and build pipeline. Gadget built a separate package for Preact hooks. Other packages you use in extensions may also need to be migrated.

You’ll also need to switch from Polaris React to Polaris web components. Shopify’s migration guide has a useful mapping of “Legacy” Polaris components to web components.

An important note: Polaris React is officially deprecated. However, as of writing, Shopify has not officially announced a migration deadline for existing extensions. A minimum of 1 year of support is guaranteed for the last React-focused API version: 2025-07.

Using Gadget’s Preact hooks

Gadget’s existing React tooling, the hooks and Provider from @gadgetinc/react and @gadgetinc/shopify-extensions, don’t work with Preact.

That’s why we built @gadgetinc/preact: a lightweight set of utilities that make it easy to call your Gadget backend directly from your Preact-based extension. They handle session token registration, authenticated requests, and data fetching, allowing you to make custom network requests in a “Preact-ful” way.

The hooks included in @gadgetinc/preact match the hooks from @gadgetinc/react, so you can build extensions with familiar APIs. There is one exception: @gadgetinc/preact does not include support for the useActionForm() hook.

Here’s an example of how you might use them in a customer account UI extension to read data and render UI:

extensions/note-goat/src/MenuActionItemButtonExtension.jsx

import "@shopify/ui-extensions/preact";

import { render } from "preact";

import { Provider, useGadget } from "@gadgetinc/shopify-extensions/preact";

import { useMaybeFindFirst } from "@gadgetinc/preact";



// 1. Import (or init) your app's API client

import { apiClient } from "./api";



// 2. Export the extension

export default async () => {

 render(<GadgetUIExtension />, document.body);

};



function GadgetUIExtension() {

 const { sessionToken } = shopify;



 // 3. Use Gadget Provider to init session management

 return (

   <Provider api={apiClient} sessionToken={sessionToken}>

     <MenuActionItemButtonExtension />

   </Provider>

 );

}



function MenuActionItemButtonExtension() {

 // 4. Use 'ready' to ensure session is initialized before making API calls

 /** @type {{ ready: boolean, api: typeof apiClient }} */

 const { api, ready } = useGadget();



 // 5. Use hooks to call your Gadget API

 const [{ data, fetching, error }] = useMaybeFindFirst(api.message, {

   pause: !ready,

 });



 return !fetching && data && <s-button>{data.body}</s-button>;

}

And this pattern can be used for any UI extension built with Preact. (The least favourite child of the UI extension ecosystem, post-purchase UI extensions, still use React.)

Preact hooks are only available for Gadget apps on framework version 1.5 or later. Read more about upgrading your app’s framework version.

Getting started

To start building with Gadget’s Preact hooks:

1. Set up your new extension.
   
   
   
   
   1. Pull down your Gadget app locally using the Gadget CLI’s ggt dev.
   
   
   2. Add workspaces: [“extensions/*”] to your Gadget app’s package.json.
   
   
   3. Generate your new UI extension using the Shopify CLI.
   
   
   
   
   
   



2. Set network_access = true in shopify.extension.toml.



3. Install the @gadgetinc/preact and @gadgetinc/shopify-extensions packages.



4. Init your app’s API client and set up the Provider in your extension.



5. Start building!

Keep an eye on your bundle size when building! If you exceed the 64kb limit, you will be notified when you run shopify app deploy to deploy your extension.

You can find full documentation and setup steps in the Gadget docs. If you want to walk through a short app build, you can follow our Shopify UI extension tutorial.

Wrapping up

The Shopify ecosystem is evolving fast. With Preact, Polaris web components, and Gadget’s Preact hooks, you can keep your extensions modern and performant without giving up the productivity of React-style development.

If you have feedback or questions, chat with us on Discord. We’d love to hear what you’re building!