@nulogy/components

@nulogy/components

Built with React, compononents make it easy to create interfaces that conform to the principles of the Nulogy Design System. Components are styled-components written using styled-system. This makes it possible to write CSS directly in JS and pass props based on our design constraints.

Installation

yarn add @nulogy/components

Usage

1. Add fonts

Add IBM Plex Sans and IBM Plex Mono to your application

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">

2. Wrap your appliction in our theme provider

Wrap your application in the NDSProvider component to access Nulogy's theme values and add typographic defaults.

import React from 'react'
import { NDSProvider } from '@nulogy/components'

class App extends React.Component {
  render() {
    return (
      <NDSProvider>
        // your application 
      </NDSProvider>
    )
  }
}

3. Import desired components

import { Button } from '@nulogy/components'

const SomeView = () => (
  <Button>Click me</Button>
)

Please see the documentation for instructions on how best to use each component.