kylpo / monorail

🚝 Monorail | Cyber Design System

🚝 Monorail | Cyber Design System

Monorail for React helps developers execute the Monorail Design Language. Developed by the core team of engineers and UX designers at SimSpace, these components enable a reliable development workflow to build beautiful and functional web projects.

Quick Start

Add Monorail to your React application.

yarn add @simspace/monorail

You will also need our peerDependencies:

yarn add react react-dom styled-components

Check the accepted version range in package.json for compatibility.

Import the components you want and use them

import { Button } from '@simspace/monorail/dist/visualComponents/buttons/Button'

...

render() {
  return (
    <Button>Monorail</Button>
  )
}

Check out our documentation site, design.simspace.com to see all the components that are available, and how to use them.

Iconography

Some Monorail components need default icons from the Material Icon's set. Link the iconography font into your app:

<link href=“https://fonts.googleapis.com/icon?family=Material+Icons” rel=“stylesheet”>

Typescript

When using Monorail with a typescript project, make sure to add the following line to the compilerOptions of your tsconfig.json:

"skipLibCheck": true