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>

Running examples locally

The repository includes a set of interactive examples covering AR, VR, hands interaction, flexbox layout, game components, and more.

npm install
npm run dev

Open http://localhost:5173 to see the examples landing page. From there you can navigate to each example.