Bkn-ui-react NPM

Note

This is still a work in progress. We recommend to NOT use it in production environment.

Beakyn UI React

Beakyn UI React is a set of React components that is a mix of Google's Material Design, Bootstrap 4 and some custom styles.

We will make docs and somelive examples available soon.

Installation

Beakyn UI React is available as an npm package.

npm install bkn-ui-react --save

Default Theme

Include CSS with default theme into HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

Roboto Font and Material Design Icons

Beakyn UI React was designed with the Roboto font and Material Design Icons in mind. So be sure to include it in your project. Here are detailed instructions on how to include Roboto and Material Design Icons.

Or you can just insert these into HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Usage

Here is a quick example to get you started.

import * as React from 'react';
import {Nav, NavLink} from 'reactstrap';
import {Layout} from 'bkn-ui-react';

const drawerContent = (
  <Nav vertical>
    <NavLink
      className="toggle-drawer active"
      href="#"
    >
      Link 1
    </NavLink>

    <NavLink
      className="toggle-drawer"
      href="#"
    >
      Link 2
    </NavLink>
  </Nav>
);

export const PageExample = () => (
  <Layout
    mainNavTitle="Blank Page"
    drawerContent={drawerContent}
    drawerHeaderTitle="App Name"
  >
    <h1 style={{margin: 80}}>Blank Page Content</h1>
  </Layout>
);