Spatial Design System

A set of reusable components and styles for AR and VR applications developed in A-FRAME. Primary focus is on mobile AR but general guidelines are applicable and goggles.

Documentation

See our documentation web with description of all components and also tutorials how to make things running. It also includes how to combine our library with Vue.

Getting started

You must use a package manager and a build system like Vite to use our library. Other options are not available yet.

Install our package via npm:

npm install spatial-design-system

In your javascript file, like main.js, import components you want to use. For example, import ar-button primitive and billboard component that is a part of position.js:

import "spatial-design-system/primitives/ar-button.js";
import "spatial-design-system/components/position.js";

Use it in your A-FRAME scene:

<a-ar-button
        position="0 1.6 -3"
        size="medium"
        content="Click me"
        uppercase=true
        rounded=true
        outlined=true
        billboard
></a-ar-button>

Example project

See an example minimalistic Vite project with A-FRAME and Spatial Design System installed.

1. Go to folder example-project (download it from GitHub repository)
2. Run npm install.
3. Run npm run dev.
4. Open the displayed link in browser.
5. You should see a green button. Move left and right and the button will be always facing the user thanks to the billboard component.