Getting started

Introduction

A universal UI framework for NearSt dashboard applications.

Getting started

Import the @nearst/ui package into your project to use any of the UI elements:

yarn add @nearst/ui

You can then start using the NearSt UI module in your app by importing the individual components as demonstrated below.

import { Block, Button } from '@nearst/ui';
 
const app = () => (
	<Block title={'A title for this block of info'}>
		<Button>Hello, world</Button>
	</Block>
);

You will also need to import the UI Library CSS by adding the following to your top level file - usually the index.js or App.js

// within the monorepo:
import '@nearst/ui/src/styles/global.scss';
 
// outside the monorepo:
import '@nearst/ui/dist/ui.css';

Guidelines

Some general things to consider when creating new components:

  • To create a new component, make a new folder in the “components” folder. Try to name the component as simply and semantically as possible.
  • Make sure you have an index.js in your component folder - this will be the point of entry for exporing the component(s) into the final npm module.
  • Use SCSS
  • Keep our CSS/SCSS modular and organised by usingBEM
  • For anything that should be applied or accessible to all components, place it in the global.scss

Using colours

You can access the colours from the UI library in your CSS files by using the following syntax

.kanban-text {
	color: var(--blue-darkest);
}

You just need to check the variable names on the colours page and add ”—” beforhand. var(--color-name). Simples!

Component docs

Please see the links on the left for information on the components.

Colours