Adastra
Shopify Themes with next-gen frontend tooling.
Install
The recommended way to scaffold an Adastra
npm create adastra@latestUsing Yarn/PNPM
yarn create adastra@latest
# pnpm create adastra@latestAdastra 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
| 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
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.