FlavourUI

Highly theme-able React component library built with flavour.

_{Inspired by material-ui}

⚠ THIS REPOSITORY IS IN DEVELOPMENT ⚠

FlavourUI is still in active development and has not yet been released for production use.

If you would like to participate in the development of FlavourUI email me. 😊

Quick Start

Install the package using npm:

npm i @gobl/flavour-ui

or by using yarn:

yarn add @gobl/flavour-ui

Link Inter Font-Face to index

<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />

Render a Button Component

import React from "react";
import ReactDOM from "react-dom";

import { Button } from "@gobl/flavour-ui";

const App = (props) => {
  return (
    <React.Fragment>
      <Button color="primary">Primary</Button>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Theming

...
import { ThemeProvider, Button } from "@gobl/flavour-ui";

const theme = {
  typography: {
    font: "Arial, sans-serif"
  }
  colors: {
    primary: "hotpink"
  },
  components: {
    button: {
      root: {
        padding: "0.35rem 1.25rem"
      }
    }
  }
  ...
}

...

<ThemeProvider theme={ theme }>
  <Button color="primary">Hot Pink Button!</Button>
</ThemeProvider>

...

Documentation

Library Progress

🟩 Completed | ⬜ Next

• 🟩 Buttons
• 🟩 ButtonGroups
• 🟩 Checkboxes
• 🟩 Containers
• 🟩 Typography
• 🟩 Grids
• 🟩 Radios
• 🟩 RadioGroups
• 🟩 Switches
• ⬜ Date/Time
• ⬜ TextField
• ⬜ Select
• ⬜ Sliders

Development

Clone the repository with:

git clone https://github.com/gobl-software/flavour-ui.git

cd flavour-ui

Install dependencies with npm:

npm install

or using yarn:

yarn install

Start the development server:

npm run package:dev

Now you can edit the packages/flavour-ui directory and the example will update automatically.

Developing styleguidist docs

Run the development server:

npm run sg:server

Build the site using:

npm run sg:build

Fonts

• Inter