Adastra Save
Adastra is a powerful, flexible framework for building unique and custom Shopify themes with next-gen frontend tools.
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.
Open Source Agenda Badge
