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 <inline-code>2025-10<inline-code>, 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 <inline-code>useState<inline-code> and <inline-code>useEffect<inline-code>, 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. More details on

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: <inline-code>2025-07<inline-code>.

Using Gadget’s Preact hooks

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

That’s why we built <inline-code>@gadgetinc/preact<inline-code>: 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 <inline-code>@gadgetinc/preact<inline-code> match the hooks from <inline-code>@gadgetinc/react<inline-code>, so you can build extensions with familiar APIs. There is one exception: <inline-code>@gadgetinc/preact<inline-code> does not include support for the <inline-code>useActionForm()<inline-code> hook.

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

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 <inline-code>ggt dev<inline-code>.
   2. Add <inline-code>workspaces: [“extensions/*”]<inline-code> to your Gadget app’s <inline-code>package.json<inline-code>.
   3. Generate your new UI extension using the Shopify CLI.
2. Set <inline-code>network_access = true<inline-code> in <inline-code>shopify.extension.toml<inline-code>.
3. Install the <inline-code>@gadgetinc/preact<inline-code> and <inline-code>@gadgetinc/shopify-extensions<inline-code> packages.
4. Init your app’s API client and set up the <inline-code>Provider<inline-code> 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 <inline-code>shopify app deploy<inline-code> 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!