Add audio and video player controls to websites with Media Chrome custom elements and web components.
Open source
10 alternativesHydrogen
Build headless Shopify stores with Hydrogen, Shopify’s toolkit for custom commerce interfaces.
About Hydrogen
Hydrogen is Shopify's open-source stack for headless commerce, maintained in a GitHub monorepo. It provides tools, utilities, and examples for building custom storefronts on Shopify using the Storefront API and Customer Account API. It is designed to work with React Router and also includes a React library that can be used with other supporting frameworks.
You can generate a new project from the command line with npm create @shopify/hydrogen@latest, install dependencies with npm, yarn or pnpm, and run a local development server at http://localhost:3000. The repo includes separate packages for React Router tools, commerce components, hooks and utilities, API type generation, Shopify CLI extension, and mini-Oxygen for simulating the Oxygen production environment locally. Requirements include Node.js version 22 or 24.
It suits frontend developers building custom headless Shopify storefronts with React. Versioning follows the Shopify API calendar, so breaking changes can occur every three months when APIs update. Documentation, discussions, and contribution guidelines are included in the repository.
Key features
- Build headless Shopify storefronts with React Router tools
- Use Shopify-specific commerce components, hooks, and utilities
- Generate types for Storefront API and Customer Account queries
- Simulate Oxygen production environment locally
- Create new Hydrogen project from the command line
Best for: Frontend developers building custom headless storefronts on Shopify with React.
Good for
- Open source under MIT license
- Includes docs, examples, and discussions
- Provides API type generation and local Oxygen simulation
- Supports React Router and other supporting frameworks
Watch out for
- Requires Node.js version 22 or 24
- Breaking changes can occur every three months with API updates
Hydrogen at a glance
- Website
- github.com/Shopify/hydrogen
- Category
- Development › Frontend Development
- Type
- Open-source project
- Pricing
- Free
- Open source
- Yes · Source code
- Language
- English
- Last checked
- Oct 5, 2026 · Online when checked
- Listed
- Oct 5, 2026
Hydrogen alternatives
Tools and sites you could use instead, ranked by how closely they match.
RSuite provides a suite of React components for building web applications.
Open source
14 alternatives
Reusable hooks for common application tasks are available in React Use, a library for React developers.
Open source
9 alternatives
21st.dev is a marketplace for shadcn/ui-based React and Tailwind components, blocks, and hooks.
Open source
14 alternatives
An async state management library for fetching, caching, synchronizing, and updating server state, with TypeScript/JavaScript and React, Solid, Svelte, and Vue packages.
Open source
10 alternatives
OpenChakra provides a visual JSX editor for building interfaces with Chakra UI.
Popular in Frontend Development
Well-known listings from the same topic.
Float UIfloatui.comReact Suitersuitejs.comPuckpuckeditor.comreact-springreact-spring.devshadcn-svelteshadcn-svelte.comDocusaurusdocusaurus.io
Hydrogen FAQ
What is Hydrogen?
Hydrogen is Shopify's open-source stack for headless commerce for building custom storefronts with React. It uses the Shopify Storefront API and Customer Account API.
How do I create a new Hydrogen project?
Run npm create @shopify/hydrogen@latest, then install dependencies and run npm run dev. The local app runs at http://localhost:3000.
What are the requirements to run Hydrogen?
Hydrogen requires Node.js version 22 or 24. You can use npm, yarn, or pnpm as the package manager.
Is Hydrogen open source?
Yes, the Hydrogen repository is open source under the MIT license. Contribution guidelines and docs are included in the repo.
Is something wrong or out of date?
Tell us and an editor will check it.
Own this website?
Claim this listing
Claim the listing and suggest updates yourself. An editor checks every claim first.