Adastra ✨ is a powerful and flexible framework for building custom and unique —
Shopify Themes with next-gen frontend tooling.
Install
The recommended way to scaffold an Adastra ✨ theme project is by running the command below:
npm create adastra@latest
Using Yarn/PNPM
yarn create adastra@latest
# pnpm create adastra@latest
Adastra came from the Latin word Ad-astra which stands for To the Stars ✨
Key Features ✨
- Flexible Can seamlessly be integrated with existing workflows and Shopify themes.
- Outstanding DX Lightning Fast HMR for static files and has custom CLI built on top of the Shopify CLI.
- Fast, by default Supports modules/scripts code splitting and lazyloading static files.
- UI-agnostic Supports React, Preact, Solid, Vue, Solid, Lit and more. (more examples coming soon)
- Customizable Sensible built-in default configs for use in existing themes and highly extensible.
Requirements
Please make sure you have these two already set up in your local environment.
- Node.js version 14 or higher (LTS recommended)
- Shopify Theme CLI version 3.0.0 or higher
Packages
Package | Changelog | Version |
---|---|---|
adastra-plugin | CHANGELOG | |
adastra-cli | CHANGELOG | |
adastra-cli-kit | CHANGELOG | |
create-adastra | CHANGELOG | |
adastra-branding | CHANGELOG | |
adastra-prettier-config | CHANGELOG |
Examples & Templates
Adastra ✨ comes with so many examples to showcase, how it can be used with all of these frontend tools and ui frameworks, to build next generation online storefronts.
Theme/Example | Command |
---|---|
Basics Template (Tailwind & Prettier) | npm create adastra@latest -- --template basics |
Minimal Template | npm create adastra@latest -- --template minimal |
Necessary Template | npm create adastra@latest -- --template necessary |
Example with React | npm create adastra@latest -- --template blanklob/adastra/examples/with-react |
Example with Vue | npm create adastra@latest -- --template blanklob/adastra/examples/with-vue |
Example with Preact | npm create adastra@latest -- --template blanklob/adastra/examples/with-preact |
Example with Solid | npm create adastra@latest -- --template blanklob/adastra/examples/with-solid |
Example with Typescript | npm create adastra@latest -- --template blanklob/adastra/examples/with-typescript |
Example with Lit | npm create adastra@latest -- --template blanklob/adastra/examples/with-lit |
Example with Alpine | npm create adastra@latest -- --template blanklob/adastra/examples/with-alpine |
Example with Tailwind | npm create adastra@latest -- --template blanklob/adastra/examples/with-tailwind |
Example with GSAP | npm create adastra@latest -- --template blanklob/adastra/examples/with-gsap |
Example with Sass | npm create adastra@latest -- --template blanklob/adastra/examples/with-sass |
Example with Less | npm create adastra@latest -- --template blanklob/adastra/examples/with-less |
Example with Vanilla Extract | npm create adastra@latest -- --template blanklob/adastra/examples/with-vanilla-extract |
Example with React Three Fiber | npm create adastra@latest -- --template blanklob/adastra/examples/with-r3f |
Example with React Hydrogen | npm create adastra@latest -- --template blanklob/adastra/examples/with-hydrogen |
More examples coming soon.
Documentation
Currently web documentation is under construction 🚧 you can check docs on every package.
Roadmap
This project is maintained, and I'm currently building it in public. You can follow the progress on Twitter @blanklob. You can find the roadmap here as well.
Support & Contributing
New contributors Welcome! Check out our Contributors Guide for help getting started.
Having trouble? Get help in the official Discord and meet other Shopify developers who build using Adastra ✨
Special Thanks
- Shopify CLI for inspiring Adastra ✨ CLI.
- Shopify Vite Plugin for inspiring the Vite plugin.
- Astro for inspiring the Create Adastra CLI.
- Hydrogen for inspiring development principles and architecture.