[](https://www.npmjs.com/package/@q-dev/q-ui-kit)
[](https://bundlephobia.com/package/@q-dev/q-ui-kit@1.4.0)
[](https://gitlab.com/q-dev/q-web-kit/-/blob/main/LICENSE)
[](https://gitlab.com/q-dev/q-web-kit/-/commits/main)
## Installation
To install the library, run the following command:
```bash
yarn add @q-dev/q-ui-kit
```
or
```bash
npm install @q-dev/q-ui-kit
```
### Requirements
* [bignumber.js ^9.1.0](https://npmjs.com/package/bignumber.js)
* [framer-motion ^4.1.17](https://npmjs.com/package/framer-motion)
* [react ^17.0.1](https://npmjs.com/package/react)
* [react-dom ^17.0.1](https://npmjs.com/package/react-dom)
* [styled-components ^5.3.5](https://npmjs.com/package/styled-components)
To install all dependencies, run the following command:
```bash
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](https://styled-components.com/) for styling. To make sure that the styles are applied correctly, you need to wrap your app in the `StyleProvider` component:
```jsx
import { StyleProvider } from '@q-dev/q-ui-kit';
const App = () => (
);
```
### Importing components
To use a component, import it from the library:
```js
import { Button } from '@q-dev/q-ui-kit';
```
### Using components
To use a component, simply add it to your JSX:
```html
```
### Styling components
To override the default styles, you can use component-scoped class names (starting with `q-ui-`):
```css
.q-ui-button {
background-color: red;
}
```
### Changing the theme
To change the theme, you can use the `useTheme` hook:
```jsx
import { useTheme } from 'styled-components';
const App = () => {
const { isDarkTheme, onChangeTheme } = useTheme();
return (
Current theme: {isDarkTheme ? 'dark' : 'light'}
);
};
```
## 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](https://gitlab.com/q-dev/q-web-kit/-/blob/main/CODE_OF_CONDUCT.md).
By participating, you are expected to uphold this code.
## Resources
* [Changelog](https://gitlab.com/q-dev/q-web-kit/-/blob/main/CHANGELOG.md)
* [Contributing Guide](https://gitlab.com/q-dev/q-web-kit/-/blob/main/CONTRIBUTING.md)
## License
[LGPL-3.0](https://gitlab.com/q-dev/q-web-kit/-/blob/main/LICENSE)
