Skip to main content

Installation

1. Setup local dev environment

Get your SpiroKit copy

Get your SpiroKit license here. We support Parity Purchasing Power. Check our gumroad page to see if you are eligible for a discount.

You can use it for as many projects as you want. Pay once, use it forever.

Make sure to copy your SpiroKit license key from Gumroad. You will need it in the next step.

Create an account on our private NPM registry

We created a private NPM registry, so you can easily install our private packages.

In order to use the registry, you need to create an account using your SpiroKit License Key (available in Gumroad) as your password:

npm addUser --registry https://registry.spirokit.com

If everything went ok, you are now logged in to our registry. You can make sure that your are logged in by running the following command:

npm whoami --registry https://registry.spirokit.com

Add the SPIROKIT_AUTH_TOKEN environment variable

Follow this guide to add the SPIROKIT_AUTH_TOKEN environment variable on your pc, so you can automatically access our private package.


2. Create a new project

Make sure to setup your dev environment first, as described above

Universal Apps

# NextJS 13 + Expo SDK 47 + Solito + SpiroKit
npx create-spirokit-app --template universal-app-template

Expo

# TypeScript
npx create-spirokit-app --template expo-template-typescript

# Supabase + TypeScript
npx create-spirokit-app --template expo-supabase-template-typescript

# Plain javascript
npx create-spirokit-app --template expo-template

NextJS

# TypeScript
npx create-spirokit-app --template nextjs-template-typescript

App templates

npx create-spirokit-app --template ecommerce-app-template
npx create-spirokit-app --template travel-app-template

3. Run your app

Congrats! You are set. To start working on your app, just run:

# Universal Apps (make sure you are in the root of your project)
yarn web
yarn native

# Expo and App templates
yarn start

Useful resources

If you want to customize your theme, these links are for you:

  1. Theme - Introduction
  2. Setting up your primary accent color, type of gray, and type of dark
  3. Using a custom accent color
  4. Overriding the Accent color for a component
  5. Adding new typefaces
  6. Choose the Initial color mode for your app
  7. Using the system color mode