Components

Overview

Violin is a components library to build UI faster with React.

Install

//with yarn
yarn add styled-components @involves/violin
// with npm
npm install styled-components @involves/violin

styled-components is required

Open Sans font

Violin was designed with the Open Sans font in mind. You can load via Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" />

Font Icons

In order to use the font Icon component, you must first add the Material icons font with Round and Outlined style. You can load via Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round|Material+Icons+Outlined" />

Global styles (recomended)

GlobalStyle component adds global setting styles as default font family, font sizes, colors and normailze:

import { GlobalStyle } from "@involves/violin";
const App = () => {
  return (
    <>
      <GlobalStyle />
      { /** */ }
    </>
  )
}

Using components

import { Button } from "@involves/violin";
<Button>Enjoy!</Button>

or you can import individual components. This way you don't load all library to using only some component.