@q-dev/q-ui-kit

Q UI Kit

Examples • Your HQ • Q Blockchain

A set of UI components for Q Blockchain

Installation

To install the library, run the following command:

yarn add @q-dev/q-ui-kit

or

npm install @q-dev/q-ui-kit

Requirements

• bignumber.js ^9.1.0
• framer-motion ^4.1.17
• react ^17.0.1
• react-dom ^17.0.1
• styled-components ^5.3.5

To install all dependencies, run the following command:

yarn add bignumber.js@^9.0.1 framer-motion@^4.1.17 react@^17.0.1 react-dom@^17.0.1 styled-components@^5.3.5

Usage

Style provider

The library uses styled-components for styling. To make sure that the styles are applied correctly, you need to wrap your app in the StyleProvider component:

import { StyleProvider } from '@q-dev/q-ui-kit';

const App = () => (
  <StyleProvider>
    <MyApp />
  </StyleProvider>
);

Importing components

To use a component, import it from the library:

import { Button } from '@q-dev/q-ui-kit';

Using components

To use a component, simply add it to your JSX:

<Button>Click me</Button>

Styling components

To override the default styles, you can use component-scoped class names (starting with q-ui-):

.q-ui-button {
  background-color: red;
}

Changing the theme

To change the theme, you can use the useTheme hook:

import { useTheme } from 'styled-components';

const App = () => {
  const { isDarkTheme, onChangeTheme } = useTheme();

  return (
    <div>
      <p>Current theme: {isDarkTheme ? 'dark' : 'light'}</p>
      <button onClick={() => onChangeTheme(!isDarkTheme)}>Change theme</button>
    </div>
  );
};

Contribution

We welcome contributions to the library. If you would like to submit a pull request, please make sure to follow our code style.

Code of Conduct

This project and everyone participating in it is governed by the Q UI Kit Code of Conduct. By participating, you are expected to uphold this code.

Resources

• Changelog
• Contributing Guide

License

LGPL-3.0