Getting started

This page describes how to get started building applications using Motis.

What is Motis?

Motis is the official React implementation of Tray's official design system. It provides you with pretty much everything you need to build UIs including colours, spacings, components and hooks. We're working hard to make all components fully accessible, screen reader ready and even support keyboard navigation.

Installation

When working inside the monorepo, you already have access to Motis! Simply import what you need from

@trayio/motis

and you're good to go.

import { Button } from '@trayio/motis'

function Demo() {
  return (
    <Button>I am a Motis button!</Button>
  )
}

If you're working outside of the monorepo however, you will have to add Motis to the project dependencies.

yarn add @trayio/motis

When doing so, make sure you have set up your npm access token correctly, otherwise you won't be able to install the package.

Setting up your app

All applications using Motis start using the Motis Provider. The

MotisProvider

handles all the setup necessary including setting up the theme and loading the required icons.
Inside your

MotisProvider

is where you render the application.

import { MotisProvider } from '@trayio/motis'

function App() {
  return {
    <MotisProvider>
      <Button>Hello there, Motis!</Button>
    </MotisProvider>
  }
}

Hello there, Motis!

Running the docs

To start the documentation application (this page) locally, simply run

yarn motis-docs:start

Storybook

We use storybook to visually test our components. When writing visual tests you can run storybook locally to check them:

yarn nx run motis-ui:storybook

Next steps

Now that you've got your application setup, you're ready to build amazing UIs! Make sure you read the documentation for the available components to understand them in detail.