Finetwork UI

Getting started

Install

Using npm

1
npm i @finetwork/ui react

Or yarn

1
yarn add @finetwork/ui react

First declare your theme, then you need to follow the next steps to add styles to your app

js
1
const theme = {
2
  colors: {
3
    linkText: '#5F3DFF',
4
    primary: '#bf3fa1',
5
    primaryText: '#000',
6
    primaryButtonText: '#fff',
7
    primary100: '...',
8
    .
9
    .
10
    secondary: '#5F3DFF',
11
    secondaryText: '#fff',
12
    secondaryButtonText: '#fff',
13
    secondary100: '#F4F2FF',
14
    .
15
    .
16
    tertiary: '#FA9A1D',
17
    tertiaryText: '#000',
18
    tertiaryButtonText: '#000',
19
    tertiary100: '#FFF8F0',
20
    .
21
    .
22
  },
23
  fonts: {
24
    primary: 'Nunito Sans, apple-system, sans-serif',
25
    secondary: 'Druk, monospace',
26
  },
27
}

Client side

Wrap your application with ThemeProvider component from @finetwork/ui

jsx
1
export default function App() {
2
  return (
3
    <ThemeProvider theme={theme}>
4
      <YourApp />
5
    </ThemeProvider>
6
  )
7
}

Server side

Get css string with method getCssString passing your theme and set css string in your style tag

jsx
1
export default function App = () => {
2
  return (
3
    <>
4
      <Head>
5
        <style
6
          id="fi-ui"
7
          dangerouslySetInnerHTML={{ __html: getCssString(theme) }}
8
        />
9
      </Head>
10
      <YourApp />
11
    </>
12
  )
13
}