Code Monkey home page Code Monkey logo

adastra's Introduction

adastra


Adastra ✨ is a powerful and flexible framework for building custom and unique —
Shopify Themes with next-gen frontend tooling.

npm package Build Status License discord chat

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 npm package
adastra-cli CHANGELOG npm package
adastra-cli-kit CHANGELOG npm package
create-adastra CHANGELOG npm package
adastra-branding CHANGELOG npm package
adastra-prettier-config CHANGELOG npm package

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.

  • Adastra Plugin Docs (here)
  • Adastra CLI Docs (here)
  • Adastra Create Theme CLI (here)

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

adastra's People

Contributors

blanklob avatar github-actions[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.